favicon についてのノート

ガイド · 読了3分

favicon が更新されない理由と、強制的に更新する方法

favicon を変更し、デプロイして、再読み込みしたのに——古いものがまだ表示されている。これは favicon に関する最も多い不満で、コードの問題であることはまずありません。ブラウザは favicon をページや画像よりもはるかに強くキャッシュし、favicon のキャッシュは通常の再読み込みでは消えないことがよくあります。

次の順序で対処してください。

• スーパーリロード。Ctrl+Shift+R（Windows）または Cmd+Shift+R（Mac）で、ページキャッシュを回避して再読み込みします。
• タブを開き直す。favicon のキャッシュは開いているタブに結び付いていることがよくあります。完全に閉じて、新しく開き直してください。
• クエリで無効化する。テスト中は link を「新しい」URL に向けます：<link rel="icon" href="/favicon.ico?v=2">。変更のたびに番号を増やします。
• ファイルが本当に存在するか確認する。yourdomain.com/favicon.ico を直接開きます。404 になる場合、ブラウザはもう存在しないファイルのキャッシュされたアイコンを表示しています。

Google 検索は別の話です。favicon をページとは別にキャッシュし、Google のスケジュールで更新するため、サイト側が正しくなった後でも、検索結果の新しいアイコンは数日から数週間遅れることがあります。それを早めるボタンはありません。/favicon.ico が Googlebot に対して 200 を返すことを確認して、待ちましょう。

オピニオン · 読了4分

20個もの favicon ファイルの生成はやめよう — 2026年の最小セット

多くの favicon ツールは、いまだに16個の PNG、browserconfig.xml、そして Microsoft のタイル画像を含む ZIP を渡してきます。そのほとんどは不要な重荷です。Windows タイルは Live Tiles インターフェースとともに廃止されました。中間サイズの PNG の山は、もはや存在しないブラウザの問題を解決するためのものでした。

今日使われているすべてをカバーするセットは次のとおりです。

• favicon.ico — マルチサイズ（16/32/48）。従来のブラウザと Google 検索向け。
• icon.svg — モダンブラウザが優先する、スケーラブルなファイル1つ。ダークモードにも対応。
• apple-touch-icon.png — iOS のホーム画面向けの 180×180。
• android-chrome-192 と -512 の PNG — Android と PWA 向けに、ウェブアプリマニフェストから参照します。

5つのファイル、4つの <link>／マニフェストの参照、以上です。ファイルが少なければ、同期して管理する手間が減り、デプロイも軽くなり、削除した画像を指し示す古い browserconfig.xml も残りません。20個必要だと言い張るツールがあれば、それはブラウザが実際に要求するものではなく、網羅的に見せることを優先しているのです。

テクニック · 読了3分

SVG の favicon とダークモード：適応する1つのアイコン

暗いロゴは明るいタブバーでは鮮明に見えますが、暗いタブバーではほとんど見えなくなります。2つのファイルを用意して切り替えるのは面倒です。SVG の favicon なら、ブラウザがアイコンを描画するときに SVG 内の CSS を適用するため、1つのファイルにブラウザのテーマへ反応させられます。

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

<link rel="icon" href="/icon.svg" type="image/svg+xml"> で参照し、フォールバックとしてシンプルな favicon.ico を残しておきます。古いブラウザや Google 検索はメディアクエリを評価しないため、それらにも静的なアイコンが必要です。結果として、明るい環境ではグリフが暗く、暗い環境では明るく反転します。すべて1つの小さなファイルから実現できます。