favicon が更新されない？まずキャッシュを直そう
更新されない favicon は、バグではなくほぼ必ずキャッシュが原因です。まずファイルが本当に変わったことを確認し、それからファイルを起点に外側へとキャッシュを無効化していきます。
ブラウザをいじる前にファイルを確認する
favicon は、ブラウザ、CDN、そして時には古いビルド成果物まで、あらゆる層で積極的にキャッシュされます。ブラウザを疑う前に、どの層が古い画像を配信しているのかを突き止めましょう。
ファイルに直接アクセスします。アドレスバーで https://yoursite.com/favicon.ico を開き、何が読み込まれるか確認します。古いアイコンなら、問題はブラウザではなく、サーバーや CDN がまだ以前のファイルを配信しています。新しいアイコンなら、ファイルは問題なく配信されており、遅れているのはブラウザキャッシュだけです。
ファイルから外側へと進める
- 1
アイコンの URL を直接開く
/favicon.ico と各 PNG のパスをアドレスバーで読み込みます。URL に古い画像が出るなら、サーバー、ビルド、CDN のキャッシュです。新しい画像が出るなら、古いのはブラウザだけなので、ブラウザの手順に進んでください。
- 2
タグにバージョンクエリを追加する
クエリ文字列を付けると URL が新しく見えるので、キャッシュは新しいコピーを取得します。アイコンを変えるたびに番号を増やしましょう。これはブラウザキャッシュに対する、最も信頼できる単一の対処法です。
- 3
プライベートウィンドウでハードリフレッシュする
プライベートまたはシークレットウィンドウは、通常の favicon キャッシュを無視します。ハードリフレッシュと組み合わせれば、ローカルコピーではなく配信されたファイルをテストできます。
- 4
CDN をパージし、古いビルドをクリアする
URL にまだ古い画像が出るなら、CDN やエッジキャッシュでアイコンのパスをパージし、ビルドが本当に新しいファイルをコピーしたか確認します。キャッシュされたビルド成果物は、クリアして再ビルドするまで古いアイコンを配信し続けます。
バージョンクエリ
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">アイコンを変えるたびに ?v= を増やします。ファイルパスは同じでも URL は新しくなるので、ブラウザと CDN のキャッシュは新しいアセットとして扱います。
よくある質問
変更したのに favicon が更新されないのはなぜですか？
キャッシュが古いファイルを配信しています。/favicon.ico を直接開いてください。そこに古い画像があれば CDN かビルドのキャッシュ、新しい画像があればブラウザキャッシュを指しています。実際に古くなっている層を直しましょう。
ブラウザに favicon を強制的に再読み込みさせるには？
/favicon.ico?v=2 のようなバージョンのクエリ文字列を link タグに追加し、変更のたびに増やして、プライベートウィンドウでハードリフレッシュします。ブラウザに新しいコピーを取得させる、最も確実な方法です。
favicon が自然に更新されるまでどのくらいかかりますか？
キャッシュの有効期間によります。バージョンクエリがないと、ブラウザや CDN はアイコンを長時間保持するため、数時間以上かかることもあります。バージョンクエリを使えば、次の読み込みで変更が反映されます。
iOS のホーム画面以外はどこも更新されました。なぜですか？
保存された iOS のショートカットは、追加された時点のアイコンで固定されます。ショートカットを削除してページを追加し直すと、新しい apple-touch-icon が反映されます。