Next.jsでファビコンを追加する方法（App RouterとPages Router）

Next.jsのファビコンの扱いは、App Router（app/）とPages Router（pages/）のどちらを使うかで異なります。このガイドでは両方をカバーし、さらにNext.jsが <link> タグを自動生成するためのファイル規約も解説します。

最速の方法：Next.jsのファイル規約を使う

App Routerでは、Next.jsが app/ ディレクトリ内の特別なファイル名を自動検出し、コードなしで適切なタグを <head> に注入します。

次のファイルを app/ 直下に配置してください。

ファイル	役割
`favicon.ico`	古典的な `.ico` — 万能フォールバック
`icon.png` / `icon.svg`	モダンなアイコン。Next.jsが自動でサイズ調整
`apple-icon.png`	iOS / Safari用タッチアイコン

app/
├── favicon.ico          # universal fallback
├── icon.png             # main icon (≥512×512)
├── icon.svg             # optional, crisp vector
├── apple-icon.png       # 180×180 for iOS
└── layout.tsx

これだけです。手動の <link> タグは不要で、Next.jsがビルド時に正しいマークアップを出力します。

1枚の画像からこれら全ファイルを生成したいですか？Favicon.one にアップロードすれば、app/ ディレクトリにそのまま使える完全パッケージをダウンロードできます。

追加サイズとマニフェストの設定

完全なPWAセットアップ（Android、スプラッシュスクリーン、複数のPNGサイズ）には、ファイルを生成して layout.tsx にメタデータベースのアイコン設定を追加します。

import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/icon.svg', type: 'image/svg+xml' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

Pages Router（レガシー）

Pages Routerを使っている場合、自動検出されるアイコンファイルはありません。ファイルを public/ に置き、タグを pages/_document.tsx に追加します。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Next.jsファビコンのよくある落とし穴

1. 開発環境では表示されるが本番では表示されない

通常はビルドキャッシュの問題です。.next を削除して再ビルドしてください。また、ファイルが実際に出力にコピーされているかも確認しましょう。.next/static やデプロイ環境をチェックしてください。

2. 正方形でない画像を使う

ファビコンは正方形でなければなりません。先にソース画像をクロップしないと、アイコンが引き伸ばれて見えます。Favicon.oneジェネレーターはクロップとリサイズを自動で行います。

3. Next.jsが古いファビコンをキャッシュする

Next.jsは静的アセットに積極的にハッシュを付けます。ファビコンを置き換えたら、完全に再ビルドして再デプロイし、ユーザーにはハードリフレッシュを案内してください。

4. ファビコンファイルを誤ったフォルダに置く

App Routerではファイルは app/ に、Pages Routerでは public/ に置きます。これらを混同するのがNext.jsファビコンで最も一般的なミスです。

動作を確認する

デプロイ後、Favicon Checker でサイトを監査しましょう。必要なアイコンとタグがすべて存在し正しく参照されているかを確認できます。

正しいNext.js構成の完全なファビコンファイルパッケージが必要ですか？Favicon.one で無料で生成できます。