favicon とは、ブラウザがタブやブックマーク、履歴に表示する小さなアイコンであり、サイトを保存したときにはスマートフォンのホーム画面にも表示されます。サイトに設置するのに必要なのは4つのファイルと約5分だけです。そして多くの人がぶつかる悩みのほとんどはキャッシュに関するもので、これについては最後のセクションで扱います。
実際に機能する最小セット
16個もの PNG や browserconfig.xml は必要ありません。Windows タイルや古い Internet Explorer 向けの形式はもう使われていません。今日実際に使われているすべてのブラウザとデバイスは、4つのアセットでカバーできます。
| ファイル | サイズ | 役割 |
|---|---|---|
favicon.ico | 16 · 32 · 48（マルチサイズ） | 従来のブラウザ、および /favicon.ico を直接取得する Google 検索のため。 |
icon.svg | ベクター | モダンブラウザが優先して使用します。どんなサイズでも鮮明で、ダークモードにも対応できます。 |
apple-touch-icon.png | 180 × 180 | iOS のホーム画面と Safari 用。iOS はここで SVG を無視するため、PNG が必須です。 |
android-chrome 192 & 512 | 192 · 512 | Android のホーム画面とインストール可能な PWA 用。ウェブアプリマニフェストから参照されます。 |
<head> に貼り付ける HTML
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
ブラウザは4行すべてを読み取り、対応している最適な形式を選びます。そのため、最新の Chrome や Safari は SVG を使い、古いブラウザは .ico にフォールバックします。.ico の行にある sizes="48x48" は、そのファイルに含まれる最大の画像サイズを宣言しているだけです。
ウェブアプリマニフェスト
マニフェストは、Android や PWA へのインストール時に適切なアイコンを使えるようにするものです。最小限の site.webmanifest は次のとおりです。
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
"purpose": "any maskable" を指定すると、Android はロゴを切り取ることなくアイコンをアダプティブな形状に切り抜けます。ただし、周囲に安全な余白を残しておくことが前提です（上級者向けのヒントを参照）。
ファイルの配置場所
すべてのファイルはサイトのルートディレクトリに置きます。ブラウザや Googlebot は、<link> タグがなくてもルートから自動的に /favicon.ico を要求するため、そこに置いておくのが最も安全なデフォルトです。
実際に反映されたか確認する
- ページをスーパーリロードします。
Ctrl+Shift+R（Windows）またはCmd+Shift+R（Mac）。 - それでも変わらない場合は、プライベート／シークレットウィンドウでサイトを開きます。キャッシュが空の状態で始まります。
- 各ファイルを直接開き（例：
yourdomain.com/favicon.ico）、404 ではなく画像が返る（HTTP 200）ことを確認します。 - ソースファイルだけでなく、DevTools でレンダリング後の
<head>も確認します。ビルド処理や CMS がパスを書き換えている場合があります。
最も時間を無駄にする原因：キャッシュ
ブラウザは favicon を他のほとんどのアセットよりも頑固にキャッシュし、通常の再読み込みでは古いものを保持し続けることがあります。新しいアイコンがどうしても表示されない場合は、次を試してください。
- スーパーリロードした後、タブを完全に閉じて新しく開き直します。favicon のキャッシュはタブ単位であることが多いためです。
- テスト中は、ブラウザが新しいファイルとして扱うようにバージョンのクエリを追加します：
<link rel="icon" href="/favicon.ico?v=2">。 - Google 検索は独自のコピーを保持し、独自のスケジュールで更新します。検索結果に新しいアイコンが表示されるまで、数日、場合によっては数週間かかると考えてください。
このサイトのすべての処理はブラウザ内で実行されます。アップロードした画像がデバイスの外に出ることはありません。そもそも画像をアップロードするサーバーは存在しません。