それでは早速ファビコンを作っていきましょう。

ベースとなるファビコンを縦横512pxで作成する

png形式で縦横512pxサイズのファビコンを作ります。
ファイル名は「favicon.png」などで良いでしょう。

ファビコンの背景色は合った方が良いですが、ダークモードに合わせた背景色にしたい場合は透過にしてください。
背景を透過にしても「ファビコンジェネレーター」で背景色の調整が可能です。

ファビコンジェネレーターで複数のファビコンを生成する

続いてファビコンジェネレーターを使って、複数のファビコンを生成していきます。

先ほど作成したfavicon.pngをアップロードします。

---

アップロード後、生成するファビコンの設定ができます。
ダークモードだとファビコンが同化しているので、調整していきます。

---

ダークモードでは見辛くなるため、背景を白く、丸形にしました。

---

iOSのホーム画面に表示されるファビコンも背景を白くしました。

---

Android用ファビコンの設定になります。今度は背景をイエロー系にしてみます。
（3）は、アイコン下に表示されるタイトルになります
（4）のカラースタイルは、スプラッシュ画面やブラウザータブのスイッチャーの背景になります。

---

Windowsのスタート画面のピン留めに使用されるファビコンの調整になります。
（１）で背景色を変更します。
（２）にチェックを入れるとファビコンが白色になります。

---

macOSのタッチバーに表示されるファビコンになります。
（１）でテーマカラーを変更することができます。

---

ファビコンファイルへのルートURLになります。
通常はトップページト同じディレクトリーにファビコンファイルをアップロードしますが、違うディレクトリにアップロードする場合はパスを指定します。

最後に「Generate your Favicons and HTML code」ボタンをクリックするとファビコンフィアルの生成が始まります。

---

「Favicon package」ボタンをクリックするとファビコン一式がダウンロードできます。

生成されたファビコンやファイルの確認

生成されたファビコン、ファイルを確認して、不要と思うものは削除します。

• favicon.ico
  ブラウザや検索結果に表示されるアイコンです。
  サイズは縦横32pxになります。
• apple-touch-icon.png
  iOSのホーム画面にアプリのように表示されるアイコンです。
  サイズは縦横180pxになります。
• android-chrome-192x192
  こちらはAndroid用アイコンになります。
• android-chrome-512x512
  これもAndroid用アイコンで、アプリの起動やPWAのスプラッシュ用アイコンとして使用されます。
• site.webmanifest
  PWA用スプラッシュ用アイコンの表示に必要なJSONファイルになります。
  ファイル名を「webmanifest.json」に変更します。
• mstile-150x150
  Windows8、10のスタート画面（タイル）にピン留めする時のアイコンになります。
• browserconfig.xml
  上記のWindowsのピン留めアイコンを指定するxmlファイルになります。
  IE11はbrowserconfig.xmlを探しに行くため、このファイルが無ければサーバーログで404が記録されます・・・。
• safari-pinned-tab.svg
  safariのピン留め用のアイコンになります。Macbookのタッチバーにも使用されます。

「mstile-150x150」「browserconfig.xml」は、Windowsのピン留めは不要、またはIE11のエラーログが気にならなければ不要です。

「safari-pinned-tab.svg」もsafariはバージョン12からfavicon.icoを参照するようになったため、タッチバーのピン留めが必要なければ、safari-pinned-tab.svgは不要です。

favicon.svgを追加する

safari用に生成された「safari-pinned-tab.svg」を複製して「favicon.svg」にリネームします。

safari-pinned-tab.svgとfavicon.svgをエディターで開き、不要なタグや記述を削除します。
サンプルでは下図のようにタグを削除してシンプルなsvgに修正しました。

ダークモードではファビコンを白色にしたいので、ダークモード用のメディアクエリのstyleシートを追記します。

svg

最終的には下記の様になりました。

必要最小限のファビコン構成

最小のファビコンで良いのなら下記の6つのファイルだけになります。

• favicon.ico
• favicon.svg
• apple-touch-icon.png
• android-chrome-192x192
• android-chrome-512x512
• webmanifest.json

HTMLヘッダーにファビコンのタグを記述する

ファビコン生成で表示されたヘッダーへのタグを適宜修正していきます。

今回は最小のファビコン構成としますので、最終的なヘッダーへのファビコン用のタグは下記になります。

HTML

メタタグの「meta name="theme-color"」は、スマフォブラウザのバーの色指定になります。不要であれば削除します。

「mstile-150x150」「browserconfig.xml」「safari-pinned-tab.svg」ファイルも使ってMac bookのバーや、Windowsのピン留めにも対応させた場合は下記になります。

HTML

以上で多くのデバイスに対応したファビコンの設定ができていると思います。

検索結果のタイトルにファビコンが表示されるので、クリック率を上げるためにもファビコンの設定はお忘れなく。