ファビコンの作り方:全ブラウザ・全デバイス対応の完全ガイド

ファビコン(「favorites icon」の略)は、ブラウザのタブやブックマーク、モバイルのホーム画面に表示されます。小さくても重要なブランディング要素であり、すべてのブラウザとデバイスで正しく実装するには意外と手間がかかります。ここでは、その正確な手順を紹介します。

ファビコンとは?

ファビコンは、ウェブサイトに関連付けられた小さなアイコンです。以下の場所に表示されます。

• ページタイトルの横にあるブラウザタブ内
• ブラウザのブックマークと履歴内
• ユーザーがサイトを保存した際のiOS/Androidホーム画面(Apple touch icon)
• PWAインストーラーのアプリアイコンとして
• 検索エンジンの結果内(場合によって)

すべてのコンテキストをカバーするには、複数のサイズと形式を含む完全なファビコン設定が必要です。

必要なファビコンサイズ

ステップ1: 高解像度の元画像を用意する

透明な背景を持つ正方形のPNGとして、最低512×512ピクセルでロゴやアイコンを作成、またはエクスポートします。これが、より小さいサイズをすべて生成するための元画像になります。

ファビコンに適したデザインのコツ

• シンプルにする — 複雑なデザインは16×16では判読できません
• 高コントラストを使う — 明るい背景に暗いアイコン、またはその逆
• 細い線を避ける — 小さいサイズでは見えなくなります
• 16×16でテストする — デザインツールでズームアウトして読みやすさを確認します

ステップ2: すべてのファビコンサイズを生成する

必要なサイズごとに手動でリサイズする代わりに、ファビコンジェネレーターを使いましょう。PicsSizerのファビコンジェネレーターは、元画像から完全なパッケージを生成します。

1. 512×512(またはそれ以上)の元PNG画像をアップロードします
2. 各サイズでの見え方をプレビューします
3. 必要なサイズをすべて含む完全なファビコンパッケージをダウンロードします

ステップ3: HTMLを追加する

以下のタグをHTMLの<head>内に配置します。

<!-- Standard favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

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

ステップ4: Webアプリマニフェストを作成する

Androidホーム画面のアイコンとPWA対応のために、site.webmanifestファイルを作成します。

{
  "name": "Your Site Name",
  "short_name": "SiteName",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

SVGファビコンという選択肢

モダンブラウザには、SVGファビコンが最適です。

• 無限に拡大縮小可能 — どの解像度でも鮮明です
• ファイルサイズが極小 — 多くの場合2 KB未満です
• ダークモード対応 — SVG内でCSSメディアクエリを使えます

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

SVG内にダークモード用のメディアクエリを含めた例です。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: black; }
  </style>
  <rect class="icon" width="32" height="32" rx="4" />
</svg>

すべてのモダンブラウザ(Chrome、Firefox、Safari 14+、Edge)がSVGファビコンに対応しています。

よくあるファビコンの問題を解決する

ファビコンが表示されない

• hrefで指定したパスにファイルが存在するか確認します
• ブラウザを強制的に再読み込みします(Ctrl+Shift+R / Cmd+Shift+R)
• ブラウザのDevTools NetworkタブでファビコンリクエストのURLに404エラーがないか確認します

デスクトップでは表示されるがモバイルでは表示されない

• iOS向けにapple-touch-iconが設定されているか確認します
• Android向けにWebマニフェストが存在し、リンクされているか確認します

更新後も古いファビコンが表示される

• ブラウザはファビコンを積極的にキャッシュします。キャッシュを回避するクエリ文字列を追加しましょう。href="/favicon.png?v=2"

ファビコンがぼやけている、またはピクセル化している

• より高解像度の元画像(最低512×512)から再生成します
• 各コンテキストに合った正しいサイズを使っているか確認します

ファビコン完全チェックリスト

• 512×512 pxの元画像(透明PNG)
• favicon.ico(旧IE向けにICO内に16×16 + 32×32を含む)
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png(180×180)
• android-chrome-192x192.png
• android-chrome-512x512.png
• favicon.svg(任意ですが推奨)
• site.webmanifest
• <head>内のHTML<link>タグ

1つの画像からパッケージ全体を生成するにはPicsSizerのファビコンジェネレーターを使うか、完全なリファレンスとしてファビコンサイズガイドを参照してください。