React でファビコンが更新されない？その解決法
ファイルを差し替えたのにタブは古いアイコンのまま。React アプリではそれはブラウザがファビコンをキャッシュしているか、ビルド出力と CDN がまだ public/ の前のコピーを配信しているかです。
配信されているファイルを確認し、次にキャッシュ
/favicon.ico を直接開いてください。まだ古い画像が表示されるなら、ビルドが新しいファイルを取り込んでいません。開発サーバーかデプロイが public/ の古いコピーを配信しており、ブラウザのキャッシュをクリアしても効きません。
直接の URL は正しいのにタブがそうでないなら、原因はブラウザです。ファビコンはページとは独立して強くキャッシュされるため、通常のリフレッシュでは足りないことがよくあります。
順番にクリアする
- 1
link にバージョンを付けるかハードリフレッシュする
href を /favicon.ico?v=2 に変えてブラウザに新しいファイルとして扱わせ、プライベートウィンドウでハードリフレッシュします。
- 2
開発サーバーを再起動するか再ビルドする
開発サーバーは再起動するまで public/ のキャッシュされたファイルを配信し続けることがよくあります。本番では、新しいファイルが出力に入るよう再ビルドしてください。
- 3
CDN をパージする
サイトの前段に CDN があるなら、ファビコンのパスを無効化して、エッジノードが古いバイトを配り続けないようにします。
React でファビコンが更新されない：よくある質問
React のファビコンが更新されないのはなぜですか？
ビルドがまだ古いファイルを配信している（/favicon.ico を直接確認）か、ブラウザがキャッシュしているかです。前者は開発サーバーの再起動か再ビルド、後者は URL にバージョンを付けてハードリフレッシュしてください。
ファビコンの再取得を強制するにはどうすればよいですか？
アイコンの href にバージョンのクエリ文字列を付けます（例：/favicon.ico?v=2）。そのうえでハードリフレッシュするかプライベートウィンドウを開きます。URL を変えることが、ブラウザに新しいファイルを取得させる要因です。
開発中は変わったのにデプロイ後は変わりません。
デプロイがビルドまたは CDN のキャッシュされたコピーを配信しています。新しいファイルがビルド出力にあることを確認してから、CDN のパスをパージして直接の URL を再度開いてください。