Next.js App Routerのファビコン

favicon.icoをappのルートに置きます。対応するiconファイルはルートセグメント内に配置でき、apple-iconはApple端末向けのアイコンを定義します。

Next.jsはこれらを検出して属性を決定し、対応するlink要素をheadへ追加します。セグメントに置いたアイコンは、そのセグメント内のルートに適用されます。

画像をpublicや画像ホストに置く場合は、layoutまたはpageにmetadata.iconsを指定します。一貫したURLを使い、icon、apple、必要に応じてshortcutを設定してください。

子セグメントのメタデータは、親から継承した複合フィールドを置き換える場合があります。親の項目がすべて統合されると思い込まず、複数のルートで最終的なheadを確認してください。

必要時に生成するアイコンにはicon.tsxやicon.jsも使えます。関数はサイズとコンテンツタイプを明示して画像データを返します。この方式は実際に動的な構成が必要な場合に使いましょう。静的ファイルのほうが、キャッシュや確認、デプロイ間での一貫した配信が簡単です。

静的マニフェストまたはmanifest.ts関数で、アプリ名、色、インストール用アイコンを定義できます。アイコンのURLは公開され、指定サイズのファイルを指す必要があります。

マニフェストとタブ用ファビコンの役割は別です。512×512のインストール用アイコンがicon.svgやfavicon.icoを自動で置き換えることはありません。

本番ビルドを実行し、対象の各セグメントからひとつずつルートを開いてlink要素を確認します。各画像のURLも直接開き、ミドルウェアに妨げられないことを確かめてください。

basePathやCDNを使う場合は、デプロイ先で生成URLをテストします。公開ベースや書き換えルールの誤りは、ローカルだけではわからないことがあります。