Next.js に最適なファビコンジェネレーター
Next.js は手書きの link タグを使いません。App Router は app ディレクトリから icon、apple-icon、favicon という名前のファイルを読み込み、ビルド時にマークアップを挿入します。適切なジェネレーターは、まさにそれらのファイルを渡してくれます。
Next.js で本当に重要なこと
App Router はタグではなくファイルからアイコンを解決します。app ディレクトリ内の icon、apple-icon、favicon という名前のファイルは、自動的にサイズ調整されリンクされます。したがってジェネレーターを判断する決め手は、その出力がその規約に従ってファイルに名前を付け配置するのか、それともフレームワークが求めていない、ばらばらの PNG と link タグ一式を渡してくるのか、という点です。
Pages Router は異なります。こちらではファイルを public に置き、タグをカスタムの Head で宣言します。自分がどちらを使っているかを把握しているジェネレーターは、Next.js のファビコンが何も出力しないまま静かに失敗する、あの一つの間違いを防いでくれます。
Next.js で重要となる基準
| 確認すべきポイント | Next.js で重要な理由 | このジェネレーターの対応方法 |
|---|---|---|
| App Router のファイル名 | アイコンは app/icon、app/apple-icon、app/favicon.ico から解決されます | その規約に従って名前を付け配置したファイルをエクスポートします |
| 手書きのタグ不要 | フレームワークが link タグを代わりに挿入します | 汎用ツールが追加してしまう冗長なタグを省きます |
| manifest と Android | PWA のインストールにはサイズの全範囲が必要です | manifest.json に加えて 192 と 512 の Android アイコンをエクスポートします |
| ルーターを認識する | App と Pages ではアイコンの解決方法が異なります | インストールの案内は片方だけでなく両方のルーターに対応します |
ファイルの置き場所（App Router）
- app/
- favicon.icoaddServed at /favicon.ico, tag auto-injected
- icon.pngaddSized and linked at build
- apple-icon.pngadd180x180 home screen icon
- public/
- manifest.jsonaddPWA install metadata
- android-icon-192x192.pngadd
- android-icon-512x512.pngadd
add と付いたファイルがジェネレーターのエクスポートするものです。それ以外はすべて標準の Next.js プロジェクトです。
ジェネレーター vs Next.js のファイル規約だけに頼る場合
Next.js を認識するジェネレーター
Start here推奨
- エクスポートが app ディレクトリの規約に一致します
- favicon.ico、すべての PNG サイズ、apple-icon を生成します
- PWA インストール向けに manifest.json と Android サイズを含みます
- 1 枚のソース画像から、すべてのサイズを正しくレンダリングします
自分でファイルを 1 つ置くだけの場合
- app/favicon.ico だけではタブしかカバーできず、それ以外は何も対応しません
- apple-touch アイコンがないため、iOS のホーム画面はフォールバックになります
- manifest がないため、Android のインストールは未完成に見えます
- 1 枚の画像を手作業でリサイズしても、16px ではまず判読できません
Next.js でファビコンに link タグは必要ですか？
App Router では不要です。app ディレクトリ内の favicon.ico、icon、apple-icon という名前のファイルは、ビルド時に自動で読み込まれ、サイズ調整され、リンクされます。手書きの link タグまで出力するジェネレーターは、フレームワークがすでに生成しているマークアップを追加していることになります。例外は Pages Router で、こちらではカスタムの Head でタグを宣言します。
Next.js 向けにジェネレーターはどのサイズをエクスポートすべきですか？
タブ用の favicon.ico、iOS のホーム画面用の 180x180 の apple-icon、そして Android と PWA のインストール用に manifest.json から参照される 192 と 512 の PNG です。判読できるかどうかを決めるのは 16px のサイズなので、まずはそこでマークをデザインしましょう。
The step-by-step for Next.js
You've picked the tool. Here's the exact install for Next.js.