Next.js でファビコンが更新されない？その解決法
ファイルは変えたのにタブは変わらない。Next.js ではそれは三つのキャッシュのいずれかです。ブラウザのファビコン保存、古い .next ビルド、あるいは古いバイトを配信する CDN です。その順に一つずつ除外してください。
まずファイルが実際に変わったか確認する
キャッシュに手を付ける前に、/favicon.ico を直接開いてください。そこで古い画像が読み込まれるなら、新しいファイルはそもそも配信されておらず（ビルドか配置の問題）、いくらハードリフレッシュしても効きません。まずそれを直してください。
直接の URL では新しいアイコンが表示されるのにタブは古いままなら、本物のキャッシュです。ブラウザはファビコンをほぼどのアセットよりも強くキャッシュし、ページとは別に保持します。
キャッシュを順番に破棄する
- 1
プライベートウィンドウでハードリフレッシュする
Cmd+Shift+R か Ctrl+F5、または新しいプライベートウィンドウを使います。これはブラウザ自身のファビコン保存をクリアするもので、最もよくある原因です。
- 2
.next を削除して再ビルドする
古いビルドが古いアイコンを出し続けることがあります。.next ディレクトリを削除して再ビルドし、Next が app ディレクトリのファイルを読み直すようにしてください。
- 3
CDN またはプラットフォームのキャッシュをパージする
Vercel やその他の CDN では、再デプロイ後もエッジが古い /favicon.ico を配信することがあります。そのパスを無効化してから、直接の URL を再度開いてください。
Next.js でファビコンが更新されない：よくある質問
Next.js のファビコンが更新されないのはなぜですか？
新しいファイルがそもそも配信されていない（/favicon.ico を直接確認）か、キャッシュが古いものを保持しているかです。ブラウザはファビコンを強くキャッシュし、古い .next ビルドや CDN もデプロイ後に前のファイルを出し続けることがあります。
Next.js でファビコンの更新を強制するにはどうすればよいですか？
Pages Router では link の href にバージョンのクエリ文字列を付けます。App Router ではタグが生成されるためそれはできません。ファイルを変更して再デプロイし、.next を削除して古いビルドをクリアし、CDN をパージしてください。
ローカルでは更新されるのに Vercel では更新されません。
エッジキャッシュが古い /favicon.ico を配信しています。デプロイに新しいファイルが実際に含まれていることを確認してから、パージまたは再デプロイでエッジに取得し直させ、プライベートウィンドウで直接の URL を確認してください。