【2024年最新版】デバイスごとに対応したファビコン設定｜必要ファイルは6種類

2024年6月24日2024年6月25日

ファビコンの設定って意外と奥深くやることがたくさんあります。
ユーザーから見えるアイコンは1つだけですが、20個以上のファイルが必要だという事実をご存知でしょうか？

最小限これを設定しておけばいける！というファイルの種類とコードをこちらに投下します。

さとみ

コーディングで忙しい方向けのショートverです！

結論（コピペOK）

HTMLは4行のみ。

<link rel="icon" href="/favicon.ico"　sizes="32x32" type="image/vnd.microsoft.icon">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">

・type="image/vnd.microsoft.icon"でIE9,10対策（なくてもOK）
・crossorigin="use-credentials"でBasic認証によるエラーを回避

記述の際、rel属性に間違いがないかしっかりチェックしてください！

manifest.webmanifest（JSONファイル）は、テキスト形式で記述。

// manifest.webmanifest
{
  "icons": [
    { "src": "/ico-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/ico-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

拡張子は.jsonでもいいのですが、本記事は.webmanifestでマニフェストファイルを作成します。

各アイコンファイル＆マニフェストファイル（manifest.webmanifest）はルートディレクトリに設置
サブディレクトリだと、「WordPress管理画面」＆「右クリック＞[ページのソースを表示]で開くページ」のファビコンが変化しません！
現在はrel="shortcut icon"ではなくrel="icon"が正しい表記

さとみ

ファビコンとウェブクリップアイコンの2行を書いておけばいいかと思いきや、デバイスを考慮すると用意するものが結構多め。
新技術が普及し続けている分、ソースコードも進化していってるんですね。

用意するファイル（全6種類）

favicon.ico（レガシーブラウザ用）
favicon.svg（ライト/ダークテーマ対応、モダンブラウザ用）
ico-192.png（Android、ホーム画面用）
ico-512.png（Android、PWA読み込み中のスプラッシュ画面用）
apple-touch-icon.png（ウェブクリップアイコン）
manifest.webmanifest（Webアプリマニフェスト）

favicon.ico（レガシーブラウザ用）

<link rel="icon" href="/favicon.ico"　sizes="32x32" type="image/vnd.microsoft.icon">

マルチアイコンにせず32x32pxのみにしましょう。

ChromeのSVGではなくICOファイルが優先されるバグに対応するために、.icoファイルにsizes="32x32"を記述するのをお忘れなく。

IE9,IE10はtype属性の値にimage/x-iconもしくはimage/vnd.microsoft.iconをつけなくてはなりませんが、要件定義に含まれることはほぼないかと思うので、type属性自体なくてもOK。

favicon.svg（ライト/ダークテーマ対応、モダンブラウザ用）

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

SVGファビコンはほとんどの主流ブラウザ（Google Chrome/Microsoft Edge/Safari/Mozilla Firefox）がサポートしているので、積極的に設定しましょう。

@media (prefers-color-scheme: dark)というメディアクエリを使用することで、ライトテーマとダークテーマでアイコンを切り替えることができます。（後述にサンプルコード記載）

apple-touch-icon.png（ウェブクリップアイコン）

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

180x180pxのPNG形式
背景色を入れる（白でOK）
画像周りに20pxほどの内側余白（パディング）を入れる

iPhone/iPadのホーム画面にショートカットとしてWebページを追加すると表示される画像です。
余白や背景色を入れると、見栄えが良くなりアイコン画像が際立ちます。

192×192/512×512のPNGアイコン＋Webアプリマニフェスト（Androidデバイス用）

<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">

// manifest.webmanifest
{
  "icons": [
    { "src": "/ico-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/ico-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

192x192pxのアイコンはAndroidのホーム画面用、512x512pxのアイコンはAndroidのPWA読み込み中のスプラッシュ画面用です。

Webアプリマニフェストについて詳しい説明はこちらをご参考ください。

ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる（例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの）ために必要な情報をJSONテキストファイルで提供します。
https://developer.mozilla.org/ja/docs/Web/Manifest

ファビコン画像の作成方法

Step1 – SVGアイコンを準備

SVGが正方形になっていることを確認してください。ファビコンは基本的に正方形である必要があります。
Illustratorにドラッグ&ドロップすれば確認・編集が可能なので、サイズ・位置調整などしましょう。

次に、SVGファイルをVSCodeやCursorなどのテキストエディタで開き、ダークテーマ用のfillがある<path>タグ、またはfillがない<path>タグを確認します。
各テーマでアイコンの色を変更するために、内部CSSでメディアクエリ@media (prefers-color-scheme: dark)を追加し、fillをライト/ダークテーマ用のカラーコードに書き換えます。

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+   <style>
+     @media (prefers-color-scheme: dark) {
+        .example { fill: #fff; }
+     }
+   </style>
-   <path fill="#4b4b4b" d="…" />
+   <path class="example" fill="#4b4b4b" d="…" />
  </svg>

「Adobe Creative Cloud（Adobe CC）」のライセンスはオンライン講座経由なら半額以上に安く購入できます。1年間のライセンス＋教材がついてくるので、初心者の方も安心です。
なお、教材は必須ではないので、お得にライセンスを購入したい方でもOK！