Next.js App Router に Favicon をすぐ設定する方法

Next.js の App Router を使用したサイトを開いた際に、汎用的なブラウザタブアイコンが表示された場合、favicon が欠如しているのはメタデータ設定が不完全なためである可能性が高いです。

Prerequisites

Next.js 13+ で、app ディレクトリを使用しているプロジェクト。
ローカルにインストールされた Node.js 18 以上。
Mzu favicondl で生成したアイコンセット（SVG、PNG、ICO）。適切なサイズはfavicon sizes guide が参考になります。

Step‑by‑step implementation

アイコンファイルを生成します。 Mzu favicondl を使用して、少なくとも次の 3 つのファイルを作成してください。
- favicon.svg – 推奨されるスケーラブル形式。
- favicon.ico – /favicon.ico を要求するブラウザ向けのレガシーフォールバック。
- apple-touch-icon.png – 任意の Apple Touch アイコン。
これらのファイルをプロジェクトの public フォルダに保存します。
app/layout.tsx でメタデータをエクスポートします。 App Router はレイアウトファイルから metadata エクスポートを読み取ります。先ほど配置したファイルを参照する icons オブジェクトを追加してください。
```
&lt;pre&gt;&lt;code&gt;export const metadata = {
  title: 'My Next.js Site',
  icons: {
    icon: '/favicon.ico', // legacy fallback
    shortcut: '/favicon.ico', // shortcut icon for older browsers
    apple: '/apple-touch-icon.png', // Apple Touch icon (optional)
    other: [
      { rel: 'icon', url: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' }
    ]
  }
};
&lt;/code&gt;&lt;/pre&gt;
```
これは Next.js が公式にドキュメントしているファイルベースのメタデータアプローチに一致します。
生成された <head> の出力を確認します。 npm run dev を実行し、ページのソースを開いてください。次のような link タグが出力されているはずです。
```
&lt;link rel='icon' href='/favicon.ico'&gt;
&lt;link rel='shortcut icon' href='/favicon.ico'&gt;
&lt;link rel='apple-touch-icon' href='/apple-touch-icon.png'&gt;
&lt;link rel='icon' href='/favicon.svg' type='image/svg+xml' sizes='any'&gt;
```
これらのタグは自動的に生成されるため、手動で記述する必要はありません。
複数のブラウザでテストします。 Chrome、Safari、Firefox でサイトを開いてください。各ブラウザは高 DPI 画面では SVG アイコンを表示し、古いバージョンでは ICO ファイルにフォールバックします。
- Chrome は type='image/svg+xml' が存在する場合、SVG を優先します。
- Safari はホーム画面用ショートカットとして Apple Touch アイコンを使用します。
- Firefox は rel='icon' エントリを尊重し、SVG が欠如している場合は ICO ファイルをキャッシュします。
デプロイします。 変更をホスティングプロバイダー（Vercel、Netlify など）にプッシュしてください。public フォルダは静的に配信されるため、ビルドが完了した直後からアイコンが利用可能になります。

Common pitfalls

public フォルダのパスが欠如している。 アイコンが public の外にある場合、生成された URL は存在しない場所を指し、ブラウザは 404 エラーを記録します。
rel='shortcut icon' のみを使用している。 現代のブラウザは rel='icon' 仕様（HTML spec）に従います。レガシー属性だけに依存すると SVG が無視される可能性があります。
キャッシュに起因する古いアイコン。 ブラウザは favicon.ico を積極的にキャッシュします。クエリ文字列（例：/favicon.ico?v=2）を付加するか、ビルド時にコンテンツハッシュを有効にして更新を強制してください。
不正な MIME タイプ。 .svg は image/svg+xml、.ico は image/x-icon で配信してください。サーバー設定が誤っているとブラウザはファイルを拒否します。

Conclusion

App Router が単一の metadata エクスポートから <link> タグを自動生成するようにすれば、favicon 設定を宣言的かつ将来にわたって保守しやすくなります。上記の手順は生成、配置、メタデータエクスポート、検証、デプロイを網羅しており、空白のタブアイコンから洗練されたブランド表現へ数分で移行できます。

SVG と ICO ファイルを手早く作成したい場合は、Mzu favicondl を試してください。App Router のアプローチに必要なファイル一式を生成してくれます。

Check the documented requirements

Next.js は metadata file conventions において favicon とアプリアイコンの取り扱いを文書化しています。

Prerequisites

Step‑by‑step implementation

Common pitfalls

Conclusion

Check the documented requirements

今すぐ完璧なファビコンを生成