ガイド

Next.jsのファビコン

Next.js 14 以降の App Router は、/app/icon.png と /app/favicon.ico を規則として扱います。これらをドロップすると、Next は適切なタグを自動的に発行します。

favicon.ico を /app 内に配置すると、Next はそれを /favicon.ico で提供し、リンクタグを挿入します。

マルチサイズのアイコンやテーマ別のアイコンの場合は、/app 内の icon.png、icon.svg、apple-icon.png というファイル規則を使用します。次に、ファイルのメタデータから <link> タグを生成します。

使い方

今すぐ試す

Next.js App Router ではアイコンはどこに移動しますか?+

/app ディレクトリ内。ファイル名 (アイコン、リンゴアイコン、ファビコン) によって役割が決まります。

Pages Router についてはどうですか?+

favicon.ico を /public にドロップし、_document.tsx からリンクします。

マルチサイズの .ico はまだ必要ですか?+

従来のブラウザのサポート、特に Edge および IE モードのショートカットに推奨されます。