JA EN

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

· 約 9 分で読めます

favicon とは - 役割と重要性

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

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

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

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

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

ICO (Windows Icon Format):

SVG (Scalable Vector Graphics):

PNG (Portable Network Graphics):

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 対応含む):

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

マニフェストファイルには "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>

設計上の注意点:

テスト方法:

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

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

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

デザイン原則:

よくある失敗パターン:

制作ワークフロー:

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

オンラインツール:

コマンドラインツール:

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

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

検証方法:

関連記事

SVG の基礎と活用法 - ベクター画像の仕組みからアニメーションまで

SVG (Scalable Vector Graphics) の基本構造から実践的な活用法まで解説。パス、図形、テキスト、フィルタ、アニメーションの実装方法と最適化テクニックを紹介します。

レスポンシブ画像の実装ガイド - srcset, sizes, picture 要素の完全解説

デバイスの画面サイズや解像度に応じて最適な画像を配信するレスポンシブ画像の実装方法を、コード例とともに詳しく解説します。

ダークモード対応画像の実装ガイド - picture 要素と CSS による切り替え

ダークモードに最適化された画像の実装方法を解説。picture 要素の media 属性、CSS の prefers-color-scheme、SVG の色反転など具体的な手法を紹介します。

ベクター vs ラスター - 画像形式の使い分けガイド

ベクター画像とラスター画像の違いを仕組みから解説。ロゴ、写真、Web デザインなど用途別に最適な形式の選び方を具体的に紹介します。

CSS スプライトの作り方と最適化 - HTTP リクエスト削減の実践テクニック

CSS スプライトの基本概念から作成手順、最適化テクニックまで解説。HTTP リクエスト削減によるページ速度改善の実践方法を紹介します。

透過画像の作り方と活用法 - PNG, WebP, SVG での透明背景の実現

Web デザインで欠かせない透過画像の作成方法を、PNG, WebP, SVG の各フォーマットの特性と実践的な制作テクニックとともに解説します。

関連用語