favicon の作り方完全ガイド - ICO, SVG, PNG の使い分け

favicon とは - 役割と重要性

favicon (ファビコン) は「favorite icon」の略で、Web サイトを識別するための小さなアイコン画像です。ブラウザのタブ、ブックマーク、履歴、検索結果 (Google モバイル検索) など、さまざまな場所に表示されます。

favicon が重要な理由は以下の通りです:

• ブランド認知: 複数のタブを開いている状況で、ユーザーがサイトを瞬時に識別できる。テキストが読めないほど小さいタブでも、favicon があれば判別可能
• 信頼性の向上: favicon が設定されていないサイトは、未完成または信頼性が低い印象を与える。ブラウザのデフォルトアイコン (地球儀や白紙) が表示されると、プロフェッショナルさが損なわれる
• SEO への間接的効果: Google モバイル検索結果に favicon が表示されるため、クリック率 (CTR) に影響する可能性がある
• PWA 対応: Progressive Web App としてホーム画面に追加する際、favicon がアプリアイコンとして使用される

favicon の歴史は 1999 年の Internet Explorer 5 に遡ります。当初は /favicon.ico に 16x16px の ICO ファイルを配置するだけでしたが、現在は高解像度ディスプレイ、ダークモード、PWA など多様な要件に対応する必要があり、複数のフォーマットとサイズを用意するのが標準的です。

favicon フォーマットの比較 - ICO, SVG, PNG

現代の favicon 実装では、3 つのフォーマットを組み合わせて使用します。それぞれの特徴と用途を理解しましょう。

ICO (Windows Icon Format):

• 複数サイズ (16x16, 32x32, 48x48) を 1 ファイルに格納できるコンテナ形式
• 全ブラウザで対応。レガシーブラウザとの互換性が最も高い
• /favicon.ico に配置すると、<link> タグなしでも自動検出される
• 欠点: ファイルサイズが大きくなりがち、ベクター非対応

SVG (Scalable Vector Graphics):

• ベクター形式のため、どのサイズでもシャープに表示される
• CSS メディアクエリを埋め込めるため、ダークモード対応が可能
• ファイルサイズが非常に小さい (数百バイト〜数 KB)
• 対応ブラウザ: Chrome 80+, Firefox 41+, Edge 80+, Safari 15+ (2026 年時点でほぼ全ブラウザ対応)
• 欠点: IE 非対応 (もはや問題にならない)

PNG (Portable Network Graphics):

• 透過対応、フルカラー、広い互換性
• Apple Touch Icon (apple-touch-icon.png) として iOS で必須
• Android のホーム画面アイコンとしても使用される
• 欠点: ラスター形式のため、サイズごとに別ファイルが必要

2026 年の推奨構成は、SVG をメインに据えつつ、ICO をフォールバック、PNG を Apple/Android 用に用意する 3 層構造です。

最小構成と推奨構成

favicon の実装は、プロジェクトの要件に応じて最小構成から推奨構成まで段階的に対応できます。

最小構成 (3 ファイル):

以下の 3 ファイルで、主要なブラウザとデバイスをカバーできます:

1. /favicon.ico - 32x32px (レガシーブラウザ用、<link> タグ不要)
2. /favicon.svg - SVG (モダンブラウザ用、ダークモード対応可)
3. /apple-touch-icon.png - 180 × 180 px (iOS 用)

HTML の記述:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

推奨構成 (PWA 対応含む):

上記に加えて以下を追加します:

• /icon-192.png - 192 × 192 px (Android Chrome, PWA 用)
• /icon-512.png - 512 × 512 px (PWA スプラッシュスクリーン用)
• /manifest.webmanifest - PWA マニフェストファイル (アイコンパスを記述)

マニフェストファイルには "icons": [{"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"}, {"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}] のようにアイコン情報を記述します。<link rel="manifest" href="/manifest.webmanifest"> で HTML から参照します。

SVG favicon でダークモード対応する方法

SVG favicon の最大の利点の 1 つは、CSS メディアクエリを SVG 内に埋め込むことで、OS のダークモード設定に応じてアイコンの色を自動的に切り替えられることです。

実装例:

SVG ファイル内に <style> 要素を配置し、@media (prefers-color-scheme: dark) で色を切り替えます:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a2e; }
@media (prefers-color-scheme: dark) {
path { fill: #e0e0e0; }
}
</style>
<path d="M4 4h24v24H4z"/>
</svg>

設計上の注意点:

• ライトモードとダークモードの両方で十分なコントラストを確保する
• タブの背景色はブラウザや OS によって異なるため、どちらのモードでも視認性を確認する
• 複雑なグラデーションや影は 16px 表示で潰れるため、シンプルな形状を心がける
• 色の切り替えだけでなく、ストローク幅の調整も有効 (ダークモードでは細い線が見えにくくなる)

テスト方法:

Chrome DevTools の「Rendering」パネルで prefers-color-scheme をエミュレートし、両モードでの表示を確認します。macOS では「システム設定 → 外観」で切り替え、Windows では「設定 → 個人用設定 → 色」で切り替えてテストします。ブラウザのタブ上で実際にどう見えるかを必ず確認してください。SVG のプレビューだけでは、実際のタブ表示サイズ (16x16px) での視認性は判断できません。

favicon デザインのベストプラクティス

favicon は 16x16px という極めて小さなサイズで表示されるため、通常のロゴデザインとは異なるアプローチが必要です。

デザイン原則:

• シンプルさを最優先: 細かいディテールは 16px では判別不能。ロゴの最も特徴的な要素 1 つに絞る
• 高コントラスト: 背景色との明確な差を確保。薄い色や細い線は視認できない
• 正方形を活用: favicon は正方形のキャンバスに収まる。横長ロゴはそのまま縮小せず、シンボルマークだけを使用する
• 余白を適度に: キャンバスいっぱいに要素を詰め込まず、1-2px の余白を確保すると視認性が向上

よくある失敗パターン:

• フルロゴ (テキスト + シンボル) をそのまま縮小 → テキストが読めない潰れた画像になる
• グラデーションの多用 → 16px では色の変化が判別できず、ぼやけた印象に
• 細い線やアウトラインのみのデザイン → 小サイズでは線が消えてしまう
• 背景色に依存したデザイン → ダークモードやブラウザテーマで背景が変わると見えなくなる

制作ワークフロー:

1. 32x32px のキャンバスでデザインを開始 (16px の 2 倍で作業しやすい)
2. 16x16px に縮小して視認性を確認
3. SVG でベクター版を作成 (ダークモード対応の CSS を含める)
4. ICO 用に 16x16, 32x32 のビットマップを書き出し
5. Apple Touch Icon 用に 180 × 180 px の PNG を書き出し (角丸は iOS が自動適用するため不要)

Web デザインの入門書は Amazon でも探せます

favicon 生成ツールと実装の自動化

favicon の各フォーマット・サイズを手動で作成するのは手間がかかるため、自動生成ツールを活用するのが効率的です。

オンラインツール:

• RealFaviconGenerator: SVG または PNG を入力すると、全プラットフォーム対応の favicon セットと HTML コードを自動生成。ダークモード対応の SVG も生成可能。最も包括的なツール
• Favicon.io: テキスト、画像、絵文字から favicon を生成。シンプルで手軽
• SVG Favicon Maker: SVG ベースの favicon をブラウザ上で作成・プレビュー

コマンドラインツール:

• sharp (Node.js): sharp('logo.svg').resize(32, 32).toFile('favicon.png') で各サイズを生成
• ImageMagick: convert logo.png -resize 32x32 -resize 16x16 favicon.ico で ICO ファイルを生成
• png2ico: 複数の PNG から ICO ファイルを生成する専用ツール

ビルドパイプラインへの組み込み:

Next.js, Nuxt, Astro などのフレームワークでは、public/ ディレクトリに favicon ファイルを配置するだけで自動的に配信されます。ビルド時に SVG から各サイズの PNG を自動生成するスクリプトを組み込むと、ソースファイルの管理が SVG 1 つで済みます。

検証方法:

• Chrome DevTools の「Application」パネル → 「Manifest」セクションでアイコンの読み込み状態を確認
• Google の「リッチリザルトテスト」で構造化データとの整合性を確認
• 実機テスト: iOS Safari でホーム画面に追加し、Apple Touch Icon の表示を確認
• favicon-checker.com などのオンラインツールで全プラットフォームの表示をプレビュー