ブラウザのタブに表示される小さなアイコン、それがファビコン（favicon）です。

小さいながらも、サイトのブランディングや認知度向上に大きな影響を与える重要な要素です。

この記事では、ファビコンの基礎知識から、作成方法、HTMLへの設置、PWA対応まで徹底解説します。

ファビコンとは？

ファビコンは「favorite icon（お気に入りアイコン）」の略称です。1999年にInternet Explorer 5で初めて導入されました。

現在では以下の場所に表示されます：

  • ブラウザのタブ（16×16px）
  • ブックマーク・お気に入り（16〜32px）
  • Windowsタスクバー（32×32px）
  • スマホのホーム画面（180×192px）
  • PWAのスプラッシュ画面（512×512px）
💡 豆知識

初期のファビコンは「favicon.ico」という名前でルートディレクトリに置くだけで自動認識されました。今でもこの仕組みは有効です。

ファビコンが重要な理由

1. サイトの視認性向上

多くのタブを開いているとき、ファビコンがあるとサイトをすぐに見つけられます。ファビコンがないサイトはデフォルトのアイコンになり、他のタブに埋もれてしまいます。

2. ブランドの一貫性

ロゴやブランドカラーを使ったファビコンは、サイト全体のブランディングを強化します。ユーザーの記憶に残りやすくなります。

3. プロフェッショナルな印象

ファビコンがないサイトは「未完成」「素人感」を与えることがあります。しっかり設定することで信頼感が向上します。

4. SEOへの間接的効果

Googleの検索結果にもファビコンが表示されるようになりました。魅力的なファビコンはクリック率向上に貢献する可能性があります。

サイズごとの用途

現代のWebサイトでは、複数サイズのファビコンが必要です：

サイズ 用途 必須度
16×16 ブラウザタブ、ブックマーク ★★★
32×32 Windowsタスクバー、Retina ブックマーク ★★★
48×48 Windowsピン留め ★★☆
64×64 高解像度ディスプレイ ★★☆
128×128 Chrome Web Store ★☆☆
180×180 Apple Touch Icon（iOS） ★★★
192×192 Android Chrome、PWAアイコン ★★★
512×512 PWAスプラッシュ画面 ★★★
📝 必須サイズ

最低限必要なのは16×16、32×32、180×180、192×192の4サイズです。余裕があればすべて用意しましょう。

ファイル形式の選び方

ICO形式

複数サイズを1ファイルに格納できる、Windows由来の形式です。

  • メリット：古いブラウザ（IE11以前）との互換性
  • デメリット：ファイルサイズが大きくなりがち
  • 推奨：16×16と32×32を含むfavicon.icoをルートに配置

PNG形式

現代のスタンダード。透過対応で高画質です。

  • メリット：透過対応、圧縮効率が良い、広くサポート
  • デメリット：IE10以前では非対応
  • 推奨：Apple Touch IconやPWAアイコンはPNG一択

SVG形式

ベクター形式で、どんなサイズでも鮮明に表示されます。

  • メリット：どんな拡大率でも劣化しない、ファイルサイズ小
  • デメリット：Safari、一部の古いブラウザで非対応
  • 推奨：シンプルなロゴの場合は検討の価値あり
⚠️ 注意

SVGファビコンはSafari（iOS含む）では動作しません。Apple製品対応が必要な場合はPNGも用意しましょう。

デザインのコツ

シンプルに

16×16ピクセルという極小サイズで視認できる必要があります。細かいディテールは潰れてしまうため、シンプルなシンボルや1〜2文字のイニシャルが効果的です。

コントラストを確保

背景と前景のコントラストが低いと見えにくくなります。特にブラウザのタブは狭いため、明度差を十分に確保しましょう。

ブランドカラーを活用

サイトのメインカラーを使うことで、一目でサイトを識別できます。複数の色を使う場合は2〜3色に抑えましょう。

ダークモードを考慮

透明背景のファビコンは、ダークモードで見えなくなる可能性があります。必要に応じてダークモード用のファビコンも用意しましょう。

テスト表示

作成後は必ず実際のブラウザタブで確認してください。大きなサイズで見栄えが良くても、16pxでは判別できないことがあります。

HTMLへの設置方法

基本的な設置

HTMLの<head>内に以下のコードを追加します：

<!-- 基本のファビコン -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">

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

<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

SVGファビコンの設置

SVGを使用する場合は以下のように指定します：

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any"> <!-- フォールバック -->

ダークモード対応

CSSのメディアクエリを使ってダークモード用ファビコンを指定できます（対応ブラウザのみ）：

<link rel="icon" href="/favicon-light.png"
      media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png"
      media="(prefers-color-scheme: dark)">

PWA対応

Progressive Web App（PWA）として機能させるには、manifest.json（またはsite.webmanifest）ファイルが必要です。

manifest.jsonの例

{
  "name": "サイト名",
  "short_name": "短縮名",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#4CAF91",
  "background_color": "#ffffff",
  "display": "standalone"
}
💡 ヒント

512×512のアイコンは、PWAがスプラッシュ画面で使用します。ホーム画面に追加したときの見栄えにも影響するため、しっかり作り込みましょう。

まとめ

ファビコンは小さいながらも、サイトの印象を大きく左右する重要な要素です。ポイントを整理すると：

  • 最低限16×16、32×32、180×180、192×192の4サイズを用意
  • ICO形式は古いブラウザ用、PNG形式がモダンスタンダード
  • デザインはシンプルに、コントラストを確保
  • HTMLに正しく設置し、manifest.jsonでPWA対応

当サイトのファビコンファクトリーを使えば、必要なサイズをすべて一括生成できます。ぜひお試しください！

🌐 ファビコンファクトリーを使ってみよう

テキスト・絵文字・画像から、Webサイトに必要な全サイズのファビコンを一括生成。ICO/PNG対応、ZIP一括ダウンロード。

ファビコンを作成する →
この記事をシェア