ToolPal
ブラウザとウェブサイトのアイコン・ファビコンを示すWebデザインのモックアップ

ファビコンの作り方 — ウェブサイト向け完全ガイド

📷 Pixabay / Pexels

ファビコンの作り方 — ウェブサイト向け完全ガイド

ウェブサイトにファビコンを作成、最適化、追加する方法を解説。すべてのサイズ、フォーマット（ICO、PNG、SVG）、2026年のベストプラクティスまで網羅。

D著者: Daniel Park2026年4月3日3分で読了

ファビコンとは何か、そしてなぜ重要なのか？

ファビコン（「favorite icon」の略）は、ブラウザのタブ、ブックマーク、履歴リスト、検索結果にウェブサイト名の横に表示される小さなアイコンです。その小ささにもかかわらず、ファビコンはユーザーがサイトをどう認識し、どう操作するかに重要な役割を果たしています。

複数のブラウザタブを管理することを考えてみてください。10個以上のタブが並んでいる状況では、ファビコンが正しいページを見つける唯一の視覚的な識別子になることが多いです。ファビコンがなければ、サイトは汎用的な空白ドキュメントアイコンを表示することになり、サイトが未完成か信頼性がないことを即座に示してしまいます。

ファビコンはウェブサイトに様々な形で貢献します。

  • ブランド認知度 — 一貫したファビコンはすべてのブラウザとデバイスでブランドアイデンティティを強化する
  • ユーザーエクスペリエンス — 訪問者は数十の開いているページの中から素早くタブを見つけられる
  • プロフェッショナリズム — ファビコンがないと細部への注意が欠けている印象を与える
  • 検索での視認性 — GoogleなどはモバイルSERPでファビコンを表示し、リスティングをより認識しやすくする
  • ブックマークとホーム画面 — ユーザーがサイトを保存するとき、ファビコンがブランドに関連付けられる視覚的なショートカットになる

つまり、ファビコンはウェブサイト上で最も小さなアセットの一つですが、その不在は即座に気づかれます。

ファビコンのサイズ解説

最も混乱するポイントの一つは、実際にどのサイズが必要かということです。異なるブラウザ、OS、デバイスは異なるアイコンサイズを要求します。

16x16 — ブラウザタブ（レガシー）

元のファビコンサイズで、一部の古いブラウザではタブアイコンやアドレスバーに使用されます。ほとんどのモダンブラウザは32x32に移行していますが、ICOファイル内にバンドルする場合のフォールバックとして有効です。

32x32 — ブラウザタブ（標準）

2026年のデスクトップブラウザタブのメインサイズです。Chrome、Firefox、Safari、Edgeすべてがタブアイコンの表示にこのサイズを使用します。最も重要なファビコンサイズです。

48x48 — Windowsタスクバー

Windowsはウェブサイトがタスクバーにピン留めされたり、ショートカットタイルに表示される場合に48x48バリアントを使用します。

180x180 — Apple Touch Icon

iOSユーザーがウェブサイトをホーム画面に追加すると、Safariは180x180 PNGをアプリアイコンとして使用します。apple-touch-iconリンクタグで指定し、モバイルトラフィックのあるサイトでは必須です。

192x192 — Android Chrome

Android Chromeは「ホーム画面に追加」機能とPWAマニフェストに192x192アイコンを使用します。

512x512 — PWAスプラッシュスクリーン

512x512アイコンはAndroidデバイスのPWAスプラッシュスクリーンに使用されます。PWAを構築している場合、このサイズはLighthouse監査に合格するために必須です。

クイックリファレンステーブル

サイズ用途フォーマット必須？
16x16レガシーブラウザタブICO推奨
32x32デスクトップブラウザタブICO/PNGはい
48x48WindowsタスクバーICO/PNG推奨
180x180Apple Touch IconPNGはい
192x192Androidホーム画面、PWAPNGはい
512x512PWAスプラッシュスクリーンPNGPWAの場合

ファビコンのフォーマット: ICO vs PNG vs SVG

ファビコンに適切なファイルフォーマットを選ぶことは、ブラウザサポート要件と必要な柔軟性によって異なります。

ICO — 普遍的なフォーマット

ICOフォーマットはMicrosoftがInternet Explorer 5でファビコンを導入して以来の標準です。ICOファイルは複数のサイズ（16x16、32x32、48x48）を1つのファイルにバンドルでき、最も広く互換性のあるオプションです。

PNG — モダンな標準

PNGファビコンは特定のサイズでより優れた圧縮、透明度サポート、シャープなレンダリングを提供します。ほとんどのモダンブラウザ（Chrome、Firefox、Edge、Safari 12+）が完全にサポートしています。

SVG — スケーラブルな未来

SVGファビコンはベクターベースで、1つのファイルがあらゆる解像度でシャープに見えます。また、CSSメディアクエリをサポートし、自動ダークモード対応などの機能を実現します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e0e0; }
    }
  </style>
  <rect width="32" height="32" rx="6" />
  <text x="16" y="22" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold">T</text>
</svg>

どのフォーマットを使うべきか？

2026年の推奨アプローチは3つすべてを提供することです。

  1. 最大互換性のために16x16、32x32、48x48サイズを含むICOファイル
  2. AppleとAndroidデバイス用に180x180と192x192のPNGファイル
  3. ダークモードをサポートするモダンブラウザ用のSVGファイル

ファビコンの作成方法

ファビコンを作成するには、完全に手動から完全に自動まで複数のアプローチがあります。

オプション1: オンラインファビコンジェネレーターを使用する

完全なファビコンパッケージを作成する最速の方法は、専用ツールを使うことです。無料のファビコンジェネレーターを試してみてください — 任意の画像を受け付け、必要なすべてのサイズとフォーマットを自動生成します。

オプション2: グラフィックエディターでゼロから設計する

完全なクリエイティブコントロールが必要な場合は、Figma、Adobe Illustrator、またはInkscapeで512x512キャンバスから始めます。

  1. 新しい512x512アートボードを作成する
  2. シンプルさを念頭に置いてアイコンをデザインする — 細かいディテールは16x16では失われる
  3. 512、192、180、48、32、16ピクセルでPNGバージョンをエクスポートする
  4. ImageMagickなどのツールを使って小さいサイズをICOファイルに変換する

ImageMagickでICOファイルを生成する

# ソース画像から個別サイズを生成
magick source-512.png -resize 16x16 favicon-16.png
magick source-512.png -resize 32x32 favicon-32.png
magick source-512.png -resize 48x48 favicon-48.png

# それらを1つのICOファイルにバンドル
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

ウェブサイトにファビコンを追加するHTMLコード

ファビコンファイルを生成したら、HTMLの<head>セクション内に以下のタグを追加します。

<head>
  <!-- 標準ファビコン（ユニバーサルサポートのためのICO） -->
  <link rel="icon" href="/favicon.ico" sizes="48x48" />

  <!-- ダークモードサポート付きのSVGファビコン -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  <!-- AndroidとPWA用のWebアプリマニフェスト -->
  <link rel="manifest" href="/site.webmanifest" />
</head>

site.webmanifestファイルには大きなPNGアイコンを参照させます。

{
  "name": "あなたのウェブサイト",
  "short_name": "サイト",
  "icons": [
    {
      "src": "/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

フレームワーク固有の実装

Next.js（App Router）:

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "48x48" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    apple: "/apple-touch-icon.png",
  },
};

2026年のベストプラクティス

複数のフォーマットを提供する

単一のファビコンファイルに依存しないこと。レガシーブラウザにはICO、AppleとAndroidにはPNG、モダンブラウザにはSVGを提供します。

SVGでダークモードをサポートする

ダークモードでブラウジングするユーザーがますます増えています。prefers-color-schemeメディアクエリを持つSVGファビコンは、ユーザーのシステムテーマに合わせて自動的に色を適応させます。

デザインをシンプルに保つ

ファビコンは16x16ピクセルほど小さくレンダリングされます。そのサイズでは、微妙なグラデーション、細い線、小さなテキストは見えません。太いシェイプ、高コントラストの色、最小限のディテールを使用します。

ファイルサイズを最適化する

ファビコンはすべてのページビューで読み込まれます。PNGファイルはpngquantやoptipngなどのオプティマイザーを通し、SVGファイルはsvgoでクリーニングします。

# PNGファビコンを最適化
pngquant --quality=65-80 favicon-192.png -o favicon-192.png
optipng -o7 favicon-32.png

# SVGファビコンを最適化
svgo favicon.svg -o favicon.svg

Webアプリマニフェストを使用する

PWAを構築していなくても、site.webmanifestファイルはAndroid Chromeにアイコンがどこにあるかとアプリのテーマカラーを伝えます。

ブラウザとデバイスでテストする

ファビコンをデプロイしたら、複数のブラウザ（Chrome、Safari、Firefox、Edge）とデバイス（デスクトップ、iOS、Android）で確認します。

避けるべきよくある間違い

favicon.icoだけを使用する

単一のICOファイルに頼ると、高DPIのAppleとAndroidデバイスでアイコンがぼやけて見えます。常に180x180と192x192の専用PNGファイルを含めてください。

Apple Touch Iconを無視する

apple-touch-iconをスキップすると、iOSはページのスクリーンショットを撮ってホーム画面アイコンとして使用します。結果はほぼ常に読み取れないズームインされたレイアウトのスナップショットになります。

更新後にキャッシュバストするのを忘れる

ブラウザはファビコンを積極的にキャッシュします。アイコンを更新するとき、ユーザーは数日から数週間は古いバージョンを見るかもしれません。強制リフレッシュにはバージョンクエリパラメータを追加します。

<link rel="icon" href="/favicon.ico?v=2" sizes="48x48" />

結論

適切に実装されたファビコンは、ウェブサイトの全体的な品質を反映する小さなディテールです。適切なサイズ、フォーマット、HTMLマークアップを提供することで、ブランドがすべてのブラウザ、デバイス、プラットフォームで一貫して表現されます。

素早く始めるには、無料のファビコンジェネレーターを使用して、1つのソース画像から必要なすべてのファイルを作成してください。ロゴやデザインをアップロードし、完全なパッケージをダウンロードして、HTMLタグをサイトに追加するだけです — プロセス全体が1分以内に完了します。

2026年の重要なポイント: ICO、PNG、SVGを一緒に提供する；SVGメディアクエリでダークモードをサポートする；デザインはシンプルでボールドに保つ；そして必ず実際のデバイスでファビコンをテストしてからリリースする。

よくある質問

D

著者について

Daniel Park

Senior frontend engineer based in Seoul. Seven years of experience building web applications at Korean SaaS companies, with a focus on developer tooling, web performance, and privacy-first architecture. Open-source contributor to the JavaScript ecosystem and founder of ToolPal.

詳細はこちら

この記事を共有

XLinkedIn

関連記事

読みやすさ分析ツール：スコアの意味と文章改善の実践ガイド

1分で読了

画像カラー抽出ツール：写真1枚から完成するカラーパレット

1分で読了

URLエンコードの完全ガイド — 知っておくべきすべてのこと

5分で読了