目次
Next.jsでブログサイトを運営していて、デフォルトのファビコンから自分だけのオリジナルファビコンに変更したいときってありますよね。この記事では、実際に私のプロフィール画像（clameyes.png）をファビコンに設定する例を使って、Next.js（Pages Router）での設定方法を紹介します。このブログで実際に表示されているファビコンがその結果です！
ファビコンとは
ファビコンは、ブラウザのタブやブックマーク、アプリアイコンとして表示される小さなアイコンです。サイトのブランディングにおいて重要な役割を果たします。
現代のWebアプリケーションでは、デバイスごとに最適化された複数サイズのファビコンが必要です：
- favicon.ico: 16x16, 32x32（基本）
- apple-touch-icon: 180x180（iOS Safari）
- android-chrome: 192x192, 512x512（Android Chrome）
- mstile: 150x150（Windows タイル）
元画像からファビコンを生成
1. 元画像の準備
今回は私のプロフィール画像として使っている1024x1024のPNG画像（clameyes.png）を使用します。このサングラスをかけたキャラクターがファビコンになるわけです。
ファビコン作成には正方形の高解像度画像が最適です。
2. macOSでの画像変換
実際にclameyes.pngから各サイズのファビコンを生成してみましょう。macOSのsipsコマンドを使用します：
# ファビコン用ディレクトリを作成
mkdir -p public/favicon
# 16x16サイズ（基本ファビコン）
sips -z 16 16 public/assets/about/clameyes.png --out public/favicon/favicon-16x16.png
# 32x32サイズ（基本ファビコン）
sips -z 32 32 public/assets/about/clameyes.png --out public/favicon/favicon-32x32.png
# Apple Touch Icon（iPhoneのホーム画面用）
sips -z 180 180 public/assets/about/clameyes.png --out public/favicon/apple-touch-icon.png
# Android Chrome Icons
sips -z 192 192 public/assets/about/clameyes.png --out public/favicon/android-chrome-192x192.png
sips -z 512 512 public/assets/about/clameyes.png --out public/favicon/android-chrome-512x512.png
# Windows Tile
sips -z 150 150 public/assets/about/clameyes.png --out public/favicon/mstile-150x150.png
これで、clameyes.pngから必要な全てのサイズのファビコンが生成されます。
3. .icoファイルの代替手法
macOSのsipsは.ico形式を直接サポートしていないため、32x32のPNGをfavicon.icoとして使用：
# 32x32 PNGをfavicon.icoとしてコピー
cp public/favicon/favicon-32x32.png public/favicon/favicon.ico
より正確な.icoファイルが必要な場合は、オンライン変換ツール（convertio.coなど）を使用してください。
Next.js Pages Routerでの設定
_document.tsxでファビコンを設定
Next.jsのPages Routerでは、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/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
{/* Apple Touch Icon */}
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png" />
{/* Android Chrome */}
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon/android-chrome-512x512.png" />
{/* Windows Tile */}
<meta name="msapplication-TileImage" content="/favicon/mstile-150x150.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
{/* テーマカラー */}
<meta name="theme-color" content="#ffffff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
ファイル構造
clameyes.pngから生成した最終的なファイル構造：
public/
├── favicon/
│ ├── favicon.ico # 32x32 (基本)
│ ├── favicon-16x16.png # 16x16
│ ├── favicon-32x32.png # 32x32
│ ├── apple-touch-icon.png # 180x180 (iOS)
│ ├── android-chrome-192x192.png # 192x192 (Android)
│ ├── android-chrome-512x512.png # 512x512 (Android)
│ └── mstile-150x150.png # 150x150 (Windows)
└── assets/
└── about/
└── clameyes.png # 1024x1024 (元画像)
これで、サングラスをかけたキャラクターがブラウザタブやホーム画面に表示されるようになります！
PWAにも対応したい場合
もしPWAとして配布したい場合は、マニフェストファイルも用意しましょう：
site.webmanifest（オプション）
{
"name": "My Blog",
"short_name": "Blog",
"icons": [
{
"src": "/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
マニフェストの読み込み
// pages/_document.tsx
<link rel="manifest" href="/favicon/site.webmanifest" />
動作確認してみよう
開発サーバーで確認
開発サーバーを起動してブラウザのタブでファビコンを確認してみましょう：
npm run dev
# http://localhost:3000 でファビコンを確認
ファビコンが表示されない場合
ファビコンは強くキャッシュされるので、更新が反映されない場合は強制リロードしてみてください：
- Chrome: Ctrl+Shift+R（Windows）/ Cmd+Shift+R（Mac）
- Safari: Cmd+Shift+R
- Firefox: Ctrl+F5
スマホでも確認してみる
- iPhone: Safariでホーム画面に追加してアイコンを確認
- Android: Chromeでホーム画面に追加してアイコンを確認
うまくいかない時の対処法
それでもファビコンが表示されない場合
-
ファイルが正しい場所にあるか確認
# ファイルが存在するか確認 ls -la public/favicon/ブラウザの開発者ツールでエラーをチェック
- F12で開発者ツールを開く
- Networkタブでファビコンのリクエストを確認
iPhoneで表示されない場合
// apple-touch-iconのサイズを明示的に指定 <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />まとめ
Next.js（Pages Router）でカスタムファビコンを設定する手順は以下の通りです：
- 正方形の元画像を用意（今回はclameyes.png、1024x1024）
- sipsコマンドで必要なサイズを生成（16px〜512px）
- pages/_document.tsxに設定を追加
- ブラウザで動作確認
実際にこのブログでも、記事内で紹介したclameyes.pngがファビコンとして使われています。思っているより簡単にできるので、デフォルトのNext.jsファビコンから自分だけのオリジナルアイコンに変更してみてください。サイトがより個性的になりますよ！
