ファビコンとブランド要素を設定する

ブラウザのタブに表示される小さなアイコン、あれが「ファビコン（favicon）」です。お店でいえば看板のようなもの。看板がないお店はなんだか不安ですよね。あなたのサイトにもオリジナルの看板を付けて、「ちゃんとしたサイトだ」という印象を与えましょう。

このレッスンでは、AIツールを使ってファビコン画像を作り、Next.js プロジェクトに設定するまでを 15分以内 で完了します。

• Next.js プロジェクトが作成済みであること（「Next.js プロジェクトを作成する」レッスンを完了済み）
• AIツール（ChatGPT、Claude、Cursor のいずれか）が使える状態

以下の3ステップで進めます。

1. AIでファビコン画像を作る — ChatGPT や Claude に頼んで、シンプルなアイコンを生成する
2. プロジェクトに配置する — 生成した画像を正しいフォルダに置く
3. ブラウザで確認する — タブにアイコンが表示されることを目で見て確かめる

まずは、あなたのサイトの「顔」になるアイコンをAIに作ってもらいましょう。

AIへのプロンプト例

ChatGPT（GPT-4o）や Claude に、次のように頼んでみてください。

良い例： 「ポートフォリオサイト用のファビコンを作ってください。シンプルな幾何学模様で、背景は透過、サイズは 512×512px の PNG でお願いします。色はネイビーとホワイトの2色で。」

悪い例： 「かっこいいアイコン作って」 → 具体性がないと、AIもどんな画像を作ればいいかわかりません。色・形・サイズを伝えましょう。

画像生成AIが使えない場合

テキストのみのAI（Claude Code や Codex CLI など）を使っている場合は、SVG（エスブイジー＝テキストで書ける画像形式）を生成してもらう方法もあります。

ポートフォリオサイト用のファビコンをSVGで作ってください。
シンプルな丸の中にイニシャル「T」を入れたデザインで、
色はネイビー（#1e3a5f）、サイズは 32×32 にしてください。

AIが返してくれたSVGコードをファイルとして保存すればOKです。

Next.js（App Router）では、app フォルダの直下に決まった名前で画像を置くだけでファビコンが設定されます。特別な設定ファイルを書く必要はありません。

配置先とファイル名

最低限 app/favicon.ico を置けば動きます。

やること

1. AIで生成した画像をダウンロードする（PNG や SVG）
2. PNG の場合は .ico 形式に変換する。AIに「この画像を favicon.ico に変換して」と頼むか、無料の変換サイトを使う
3. 変換したファイルを、プロジェクトの app/ フォルダ直下に favicon.ico という名前で置く

良い例： app/favicon.ico に配置 → Next.js が自動認識

悪い例： public/images/my-icon.ico に配置 → Next.js が見つけられない（App Router の場合）

Claude Code / Cursor を使う場合

ターミナルでプロジェクトフォルダを開いた状態で、Claude Code や Cursor に次のように頼めます。

app/favicon.ico を作成してください。シンプルなネイビーの丸にイニシャル「T」を
白文字で入れたデザインで、32×32px の ICO 形式にしてください。

AIがファイルを直接作成して配置してくれるので、手動でのファイル移動が不要になります。

開発サーバーが起動していない場合は、ターミナルで次のコマンドを実行します。

pnpm dev

これは「開発用のサーバーを起動する」コマンドです。

ブラウザで http://localhost:3000 を開き、タブの左端を見てください。あなたが作ったアイコンが表示されていれば成功です。

表示されない場合のチェックリスト

• ファイル名は正しいですか？ → favicon.ico であること（大文字・小文字に注意）
• 配置場所は正しいですか？ → app/favicon.ico（public/ ではない）
• キャッシュが残っていませんか？ → ブラウザで Ctrl + Shift + R（Mac は Cmd + Shift + R）を押して強制リロードする
• 開発サーバーは起動していますか？ → ターミナルに ready と表示されているか確認

それでも解決しない場合は、Claude Code や Cursor に「ファビコンが表示されません。app/favicon.ico は存在するのに反映されない原因を調べてください」と聞いてみましょう。

ファビコンと一緒に、サイト名と説明文（メタデータ）も設定しておくと、検索結果やSNSでシェアされたときの見栄えがよくなります。

app/layout.tsx ファイルの中に、以下のような記述があります。

export const metadata = {
  title: "あなたのサイト名",
  description: "サイトの説明文をここに書く",
};

title と description をあなたのサイトに合った内容に書き換えましょう。

良い例：

title: "田中太郎 | Webデザインポートフォリオ",
description: "田中太郎のWebデザイン作品集です。シンプルで使いやすいサイト制作を得意としています。",

悪い例：

title: "My Website",
description: "This is my website",

→ 日本語サイトなら日本語で、具体的に何のサイトかわかる内容にしましょう。

この部分も AI に「ポートフォリオサイトにふさわしい title と description を考えて」と頼むと、いい候補を出してくれます。

以下の2つが確認できたら、このレッスンは完了です。

• ブラウザのタブにオリジナルのファビコンが表示されている
• app/layout.tsx の title と description が自分のサイト用の内容になっている

おめでとうございます！あなたのサイトに「看板」が付きました。これだけで、サイト全体の印象がぐっとプロフェッショナルになります。