Next.jsでWebサイトを作り始めたものの、ファビコン（ブラウザのタブに表示される小さなアイコン）の設定方法がわからず困っていませんか？本記事では、Next.jsのバージョンに応じたファビコンの設定方法を、初心者の方にもわかりやすく解説します。
ファビコンとは？なぜ重要なのか
ファビコン（favicon）は、ブラウザのタブやブックマーク、スマートフォンのホーム画面などに表示される小さなアイコンのことです。正式名称は「favorite icon（お気に入りアイコン）」で、そこから「favicon」という名前が付けられました。
ファビコンを設定すべき3つの理由
ブランド認識の向上
複数のタブを開いている状態でも、ファビコンがあればサイトを一目で識別できます。独自のファビコンを設定することで、ユーザーの記憶に残りやすくなり、ブランド認知度の向上につながります。
プロフェッショナルな印象
ファビコンが設定されていないサイトは、未完成の印象を与えてしまいます。小さな要素ですが、細部へのこだわりがサイト全体の信頼性を高めます。
ユーザビリティの改善
ブックマークやタブ管理がしやすくなり、ユーザーエクスペリエンスが向上します。特にスマートフォンでホーム画面に追加された際、適切なアイコンが表示されることで、アプリのような使い心地を提供できます。
Next.jsのバージョンによる設定方法の違い
Next.jsは、バージョン13でApp Routerという新しいルーティングシステムが導入され、ファビコンの設定方法も大きく変わりました。まずは自分のプロジェクトがどちらを使用しているか確認しましょう。
使用しているルーターの見分け方
プロジェクトのルートディレクトリを確認してください。
- App Routerを使用：
appディレクトリが存在する - Pages Routerを使用：
pagesディレクトリが存在する（appディレクトリはない）
それでは、それぞれの設定方法を詳しく見ていきましょう。
App Router（Next.js 13以降）でのファビコン設定
App Routerを使用している場合、ファビコンの設定は非常にシンプルです。特定の名前でファイルを配置するだけで、Next.jsが自動的に認識してくれます。
最もシンプルな設定方法
appディレクトリの直下に、以下のファイルを配置するだけです。
my-next-app/
├── app/
│ ├── favicon.ico ← ここに配置
│ ├── layout.tsx
│ └── page.tsx
├── public/
└── package.json
これだけで、Next.jsが自動的に以下のようなHTMLタグを生成してくれます。
<link rel="icon" href="/favicon.ico" />
コードを一切書く必要がなく、ファイルを置くだけで完了です。驚くほど簡単ですね。
対応しているファイル名と形式
App Routerでは、以下のファイル名が自動認識されます。
基本のファビコン
favicon.ico– 最も一般的な形式
高解像度アイコン
icon.png– PNG形式のアイコンicon.jpg– JPEG形式のアイコンicon.svg– SVG形式（スケーラブル）
Apple端末専用アイコン
apple-icon.png– iPhoneやiPadのホーム画面用apple-icon.jpg– JPEG形式のApple専用アイコン
実際の設定例
それでは、実際にファビコンを設定してみましょう。
ステップ1：ファビコン画像を準備する
まず、正方形の画像を用意します。最低でも32×32ピクセル、推奨は512×512ピクセル以上です。デザインツールで作成するか、既存のロゴを使用してください。
ステップ2：ファイルを配置する
準備した画像をappディレクトリ直下に配置します。
app/
├── favicon.ico # 基本のファビコン
├── icon.png # Retina対応の高解像度版
└── apple-icon.png # iOS用
ステップ3：開発サーバーを再起動する
ファビコンを追加した後は、開発サーバーを再起動してください。
# サーバーを停止（Ctrl + C）してから再度起動
npm run dev
ブラウザのタブにアイコンが表示されれば成功です。
複数サイズのアイコンを用意する方法
異なるサイズや用途に応じて、複数のアイコンを用意することもできます。
app/
├── icon1.png # 32×32ピクセル
├── icon2.png # 64×64ピクセル
└── icon3.png # 128×128ピクセル
Next.jsは自動的にこれらを検出し、適切なサイズを使い分けてくれます。
動的にファビコンを生成する方法
Next.jsの強力な機能の一つが、ファビコンを動的に生成できることです。これは、プログラムでアイコンを作成したい場合に便利です。
// 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={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#1a73e8',
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}
>
MS
</div>
),
{ ...size }
)
}
このコードは、青い背景に白い文字で「MS」と表示されるファビコンを動的に生成します。ブランドカラーやイニシャルを使ったシンプルなアイコンを簡単に作成できます。
メタデータでの詳細設定
より細かい制御が必要な場合は、layout.tsxのメタデータ設定を使います。
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
icons: {
icon: [
{ url: '/icon.png' },
{ url: '/icon-dark.png', media: '(prefers-color-scheme: dark)' },
],
apple: [
{ url: '/apple-icon.png' },
{ url: '/apple-icon-x3.png', sizes: '180x180', type: 'image/png' },
],
},
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>{children}</body>
</html>
)
}
この設定により、ダークモード対応や複数サイズの指定が可能になります。
Pages Router（Next.js 12以前）でのファビコン設定
Pages Routerを使用している場合は、publicディレクトリを活用します。
基本的な設定手順
ステップ1：publicディレクトリにファイルを配置
my-next-app/
├── public/
│ ├── favicon.ico ← ここに配置
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ └── apple-touch-icon.png
├── pages/
└── package.json
public/favicon.icoを配置すれば、基本的には自動で認識されます。
ステップ2：カスタマイズが必要な場合
より詳細な設定が必要な場合は、pages/_document.jsまたはpages/_document.tsxを作成します。
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="ja">
<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"
/>
{/* Apple端末用 */}
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
{/* Android Chrome用 */}
<link
rel="manifest"
href="/site.webmanifest"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
この方法では、HTMLの<head>タグ内に直接ファビコンのリンクを記述します。
TypeScriptを使用している場合
TypeScriptプロジェクトでは、以下のように型付けされたコードを使用します。
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="ja">
<Head>
<link rel="icon" href="/favicon.ico" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
推奨されるファビコンのサイズとファイル形式
様々なデバイスや用途に対応するため、以下のサイズを用意することをお勧めします。
基本セット（最低限必要）
16×16ピクセル
ブラウザのタブに表示される最小サイズです。シンプルなデザインでも識別できるように工夫しましょう。
32×32ピクセル
Windows環境のタスクバーやブックマークで使用されます。多くのブラウザでの標準サイズです。
180×180ピクセル
iPhoneやiPadのホーム画面に追加された際に使用されます。Apple端末では必須のサイズです。
推奨される完全セット
より広範な対応を目指す場合は、以下のサイズも用意しましょう。
- 16×16px – ブラウザタブ（必須）
- 32×32px – タスクバー、ブックマーク（必須）
- 48×48px – Windowsサイトアイコン
- 96×96px – Google TV
- 144×144px – Windows 8/10タイル
- 180×180px – Apple Touch Icon（必須）
- 192×192px – Android Chrome
- 512×512px – PWA、高解像度ディスプレイ
ファイル形式の選び方
ICO形式（.ico）
最も互換性が高く、古いブラウザでも確実に表示されます。複数のサイズを1つのファイルに含めることができる特殊な形式です。基本のファビコンとして必ず用意しましょう。
PNG形式（.png）
透明背景を持つことができ、高品質な画像を提供できます。Retina対応などの高解像度ディスプレイに最適です。
SVG形式（.svg）
ベクター形式のため、どのサイズでも鮮明に表示されます。ファイルサイズも小さく、モダンなブラウザでは最適な選択肢です。ただし、古いブラウザでは対応していない場合があります。
JPEG形式（.jpg）
透明背景が不要な写真系のアイコンに使用できますが、通常はPNGが推奨されます。ファビコンではあまり使用されません。
ファビコン生成に便利なツール
ファビコンを自分で作成するのは意外と手間がかかります。以下のツールを使えば、簡単に複数サイズのファビコンを生成できます。
オンラインジェネレーター
Favicon.io
テキストから、絵文字から、または画像からファビコンを生成できる無料ツールです。必要なサイズがすべて揃ったZIPファイルでダウンロードできます。
RealFaviconGenerator
非常に詳細な設定が可能で、すべてのプラットフォームに対応したファビコンを生成できます。プレビュー機能も充実しており、実際にどう表示されるか確認しながら作成できます。
Canva
デザイン初心者でも使いやすいツールです。テンプレートから選んでカスタマイズできるため、デザインスキルがなくても美しいファビコンを作成できます。
デザインツール
Adobe IllustratorやFigmaなどのデザインツールを使用する場合は、512×512ピクセル以上のサイズで作成し、エクスポート時に必要なサイズに縮小すると良いでしょう。
よくあるトラブルと解決方法
ファビコンの設定で遭遇しがちな問題と、その解決方法を紹介します。
ファビコンが表示されない
ブラウザキャッシュの問題
ファビコンはブラウザに強くキャッシュされます。変更が反映されない場合は、以下を試してください。
- ブラウザのキャッシュをクリア（Ctrl + Shift + Delete）
- シークレットモードで確認
- 開発サーバーを再起動
- ハードリロード（Ctrl + Shift + R または Cmd + Shift + R）
ファイルパスの確認
ファイルが正しい場所に配置されているか確認しましょう。App Routerではappディレクトリ、Pages Routerではpublicディレクトリが正しい配置場所です。
ファイル名の確認
ファイル名が正確かチェックしてください。favicon.icoは小文字で、スペースや特殊文字が含まれていないことを確認しましょう。
開発環境では表示されるが本番環境では表示されない
ビルド設定の確認
Next.jsプロジェクトをビルドする際に、ファビコンファイルが含まれているか確認してください。
npm run build
ビルド後の.nextディレクトリやoutディレクトリ（静的エクスポートの場合）にファビコンが含まれているか確認しましょう。
デプロイ設定の確認
Vercel、Netlify、その他のホスティングサービスを使用している場合、静的ファイルが正しくデプロイされているか確認してください。
サイズが大きすぎて表示がおかしい
適切なサイズに調整
ファビコンは小さく表示されるため、複雑なデザインは避け、シンプルなものにしましょう。512×512ピクセルで作成し、自動縮小に任せるのが安全です。
ファイルサイズの最適化
画像圧縮ツール（TinyPNGなど）を使用して、ファイルサイズを削減しましょう。ファビコンは数KB程度が理想的です。
古いファビコンが表示され続ける
バージョニングの活用
ファビコンを更新する際は、ファイル名にバージョン番号を付けると確実です。
// app/layout.tsx
export const metadata: Metadata = {
icons: {
icon: '/icon.png?v=2', // バージョン番号を追加
},
}
クエリパラメータを追加することで、ブラウザに新しいファイルとして認識させることができます。
PWA（プログレッシブWebアプリ）対応
ファビコンは、PWAとしてアプリ化する際にも重要な役割を果たします。
manifest.jsonの設定
PWA対応する場合は、public/manifest.json（Pages Router）またはapp/manifest.json（App Router）を作成します。
{
"name": "My Next.js App",
"short_name": "MyApp",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#1a73e8",
"background_color": "#ffffff",
"display": "standalone"
}
App Routerの場合は、さらにシンプルに設定できます。
// app/manifest.ts
import { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'My Next.js App',
short_name: 'MyApp',
description: 'A Next.js application',
start_url: '/',
display: 'standalone',
background_color: '#ffffff',
theme_color: '#1a73e8',
icons: [
{
src: '/icon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/icon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
}
}
まとめ
Next.jsでのファビコン設定は、使用しているルーターによって方法が異なります。
App Router（Next.js 13以降）の場合
appディレクトリにファイルを置くだけで自動認識favicon.ico、icon.png、apple-icon.pngなどが使用可能- 動的生成やメタデータでの詳細設定も可能
Pages Router（Next.js 12以前）の場合
publicディレクトリにファイルを配置pages/_document.jsでカスタマイズ可能
ファビコンは小さな要素ですが、サイトのプロフェッショナルさとユーザビリティに大きく影響します。適切なサイズとファイル形式を用意し、様々なデバイスや環境で美しく表示されるように設定しましょう。
本記事を参考に、あなたのNext.jsプロジェクトにも素敵なファビコンを設定してみてください。ブランドの個性を表現する小さなアイコンが、サイト全体の印象を大きく変えてくれるはずです。
