フレームワークガイド

Next.jsのファビコン設定ガイド

Next.jsの現在の規約に沿ってファビコンを正しく設定する方法を紹介します。

最初にファビコンを生成する

ファビコンを追加する 3 つの方法

アプリルーターのセットアップ

メタデータ API とアプリ/アイコン ファイルの使用

方法 1

ページルーターのセットアップ

従来の _document.js アプローチ

方法 2

静的ファイル

パブリックディレクトリから提供する

方法 3

1. アプリルーター (Next.js 13+)

オプション A: icon.tsx を使用する (推奨)

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div style={{ background: '#000', width: '100%', height: '100%' }}>
        {/* Your icon content */}
      </div>
    ),
    { ...size }
  )
}

オプション B: メタデータ API の使用

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
}

2. Pages Router (Next.js 12 以下)

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <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" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

3. パブリックディレクトリ内の静的ファイル

ファイル構造:
public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
└── android-chrome-192x192.png
Next.js は、public/ に配置されると、これらのファイルを自動的に提供します。

Next.js ファビコンのベスト プラクティス

📱 可能な場合は App Router を使用してください

App Router は、メタデータ API と自動最適化によるファビコンの処理を改善します。

⚡ ファイルサイズを最適化する

favicon.ico は 1KB 未満に保ち、PNG ファイルには適切な圧縮を使用してください。

🔄 さまざまなデバイスでテストする

ファビコンがモバイル デバイス、タブレット、デスクトップ ブラウザーで正しく表示されることを確認します。