Next.js でファビコンが表示されない？その解決法
App Router では、Next.js が app ディレクトリのファイルからアイコンの link を生成します。ファイル名を外すと何も出力されません。Pages Router にはそもそも規約がありません。どちらに当たっているかを突き止めれば、解決法は明白です。
どちらのルーターを使っていますか？
App Router は app ディレクトリにある favicon.ico、icon、apple-icon という名前のファイルを読み取り、そのサイズを判定して、ビルド時に link タグを挿入します。ファイル名が間違っていたり、置き場所のフォルダが違っていたりすると、タグは一切出力されません。エラーも出ず、ただタブが空白のままになります。
Pages Router にはそうした規約がありません。ファイルを public に置き、カスタムの head で自分で link タグを宣言しない限り、何も表示されません。この二つの間で中途半端に移行したプロジェクトは、あるルートではファビコンが表示され別のルートでは表示されない、という典型的な原因になります。
ファイルを置くべき場所
| ファイル | ルーター | Next.js の挙動 |
|---|---|---|
| app/favicon.ico | App Router | /favicon.ico で配信され、タグは自動で挿入されます |
| app/icon.png | App Router | ビルド時に自動でサイズ判定・リンクされます |
| public/favicon.ico | Pages Router | 自分で link タグを追加した場合のみ表示されます |
30 秒で確認する
- 1
アイコンの URL を直接開く
/favicon.ico（または /icon）を新しいタブで読み込みます。404 が返るなら、ファイルが Next の期待する場所にありません。キャッシュではなくビルドの問題です。
- 2
ソースを表示して rel="icon" を検索する
head に icon の link が無ければ、ファイル規約が発動していません。ファイル名が favicon.ico、icon.png、apple-icon.png と完全に一致しているか確認してください。
- 3
キャッシュは最後に疑う
ファイルが解決され、タグが存在することを確認してから、初めてプライベートウィンドウでハードリフレッシュしましょう。10 回中 9 回は、問題はキャッシュより手前にあります。
Next.js でファビコンが表示されない：よくある質問
Next.js のファビコンが表示されないのはなぜですか？
App Router では、ファイル名が間違っているか app ディレクトリに無いため、link タグが生成されないからです。Pages Router では、自動の規約が無く、カスタムの head にタグを追加していないからです。/favicon.ico を直接開いてみてください。404 なら、ファイルまたは配置の問題だと確認できます。
app/icon.png があれば favicon.ico は不要ですか？
両方とも残してください。icon.png は最新のブラウザに高品質で対応し、favicon.ico は古いブラウザ、フィードリーダー、一部のリンクプレビュー用クローラーが今なおパス指定でリクエストするものです。
あるページでは表示されて別のページでは表示されないのはなぜですか？
たいていは App Router と Pages Router が混在したプロジェクトです。app ディレクトリの規約は、それがレンダリングするルートしかカバーしません。Pages Router のルートには、_document かカスタムの head に独自の link タグが必要です。