ファビコンの設定方法です。ファビコンとは、ブラウザのタブのタイトル横に表示される小さいアイコンのことですね。
当サイト「HPcode」だったら「はにわ」のアイコンを表示させています。
ファビコンは、そのサイトを示すシンボルになります。タブのみならず、スマホのホーム画面でも使われるものです。
サイト制作の際は忘れずに設置するようにしましょう！
WordPressのサイトなら、HTMLを書かなくても「サイトアイコン」の設定だけで済みます。
WordPress 6.5以降は、管理画面の「設定」→「一般」にある「サイトアイコン」から画像を選びます。それより前のバージョンでは、「外観」→「カスタマイズ」→「サイト基本情報」から設定します。
画像は、縦横512px以上の正方形を用意してください（PNGがおすすめです）。設定すると、ファビコンとスマホのホーム画面用アイコンのタグをWordPressが自動で出力してくれます。
ここから先は、HTMLを自分で書いて設置する場合の方法です。
ファビコンを設置するHTML
早速ですが、ファビコンを表示させるためのHTMLを紹介していきます。最もシンプルに書くと、以下のような感じです。これを<head>の中に書いてあげてください。
<link rel="icon" href="img/favicon.ico">これで、Chrome、Firefox、Safari、Edge、IE（※IE11のみ）のすべてに対応できます。
SVGのファビコンを使う場合
ファビコンはSVGでも作れます。SVGは拡大しても荒れないので、サイズ違いの画像をいくつも用意する手間が減ります。
<link rel="icon" href="img/favicon.ico">
<link rel="icon" href="img/favicon.svg" type="image/svg+xml">SVGのファビコンに対応していないブラウザもあるので、.icoの指定も残しておくと安心です。
番外編：スマホのホーム画面用のアイコン
ファビコンからちょっと逸れますが、一緒に語られることの多いのがスマホのホーム画面のためのアイコンです。
当サイト「HPcode」だったら以下のような感じです。ブラウザから「ホームに追加」みたいなメニューで追加できる機能になります。
このホーム画面に反映される画像の指定がrel="apple-touch-icon"です。180pxが最大で指定できるサイズということで、とりあえず最大値を指定しておきます。
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" sizes="180x180">iPhoneのホーム画面のアイコンは180×180pxなので、まずは180×180pxのPNGを1つ用意しておけば大丈夫です。WordPressで「サイトアイコン」を設定している場合は、このapple-touch-iconのタグも自動で出力されます。
.icoファイルの作り方
ファビコンは一般的には「.ico」という拡張子で作成します。pngなどの拡張子でも読み込まれますが、（そんなに気にしなくてもいいですが）古いブラウザで読み込まれなかったりするので、一応「.ico」で作っておくと無難です。
オンラインジェネレーターで作成しますが、以下のサービスが使いやすかったです。
→ 様々なファビコンを一括生成。favicon generator
作成すると大量のファイルが生成されてビックリするかもしれません笑
ただし、使うのは以下の２つになります。
- favicon.ico
- apple-touch-icon-180×180.png
これを、以下のように読み込んであげる感じになります。
<link rel="icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon-180x180.png" sizes="180x180">上記のサイトで.icoファイルを作ると「マルチアイコン」となるようで、16pxも32pxも48pxもカバーしてくれるという、ありがたみが大きいツールです。
ファビコンのキャッシュをクリアする方法
すみません、見出し詐欺です。。
キャッシュというよりは、新しいファビコンを読み込ませるというやり方になります。
HTMLで画像やCSS、JavaScriptなどの外部連携系のファイルを読み込む際は覚えておいてほしいのですが、指定したパスの後ろにGETパラメーターを付与して変更していけばOKです。
具体的には、以下のようにファイル名の後ろに?ver=1.0.1を付けてパスを記載します。
<link rel="icon" href="img/favicon.ico?ver=1.0.1">ファイルを差し替えて新しく読み込ませたい場合は、以下のようにGETパラメーターの値を?ver=1.0.2などに変えてあげれば差し替わるはずです！
<link rel="icon" href="img/favicon.ico?ver=1.0.2">これは、CSSやJavaScriptでよく使う技だったりします。覚えておいて損はないかと思います。
「キャッシュの削除お願いします」をなくせ！強制的にCSSのキャッシュを無効化する２つの方法
おわり
ファビコンの設定方法を紹介しました。番外編としてスマホのホーム画面に使う画像の設定方法にも言及しました。ファビコンとホーム画面の画像はセットで紹介されることが多いので、どちらも覚えておくといいかと思います。
小さな画像ですが、意外とサイトの顔となりうる可能性の高いアイコンとなりますので、こだわっているサイトであれば確実に設定しておきましょう！
