SVGファビコン：なぜ優れているのか、そして実際の使い方

ファビコンについて言えば、私たちは1999年からピクセル化されたICOファイルに縛られてきました。25年間ぼやけた小さなアイコンです。でもSVGファビコンは？正直言ってかなり素晴らしいのに、ほとんどの開発者はまだ使っていません。

なぜ切り替えたくなるかもしれないか、そしてもっと重要なこととして、古いブラウザのユーザーに影響を与えずにどう実装するかをお見せします。

SVGファビコンが本当に価値がある理由

ぼやけない無限スケーリング

ファビコン用に5種類のPNGサイズを作成したこと覚えていますか？16x16、32x32、48x48...すぐに飽きますよね。SVGなら1つのファイルを作成するだけです。それだけ。ブラウザタブの16ピクセルでもPWAスプラッシュ画面の512ピクセルでも鮮明に見えます。

典型的なSVGファビコンの重さは300〜800バイト。これを2〜5KBのPNGファビコンパッケージと比較してください。85〜95%のサイズ削減です。絶対値としては大きくありませんが、最適化するときはすべてのバイトが重要です。

ただ動くダークモード

これが決定的な機能です。SVGファビコンを使えば、CSSメディアクエリをファイルに直接埋め込むことができます。ユーザーがダークモードに切り替えると、ファビコンが自動的に適応します。

実際にはこんな感じになります：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

これは明るい背景では暗く、暗い背景では明るくなるシンプルな三角形です。JavaScriptは不要。サーバーサイド検出も不要。ただ動くのです。

CSSスタイリングとアニメーション

SVGは基本的にスタイリング付きXMLなので、ラスターフォーマットでは不可能なことができます：

ホバー時の色変更（サポートされているコンテキストで）
控えめなアニメーションの追加
テーマ用のCSS変数の使用
JavaScriptでのスタイル変更

ファビコンでアニメーションをやりすぎるのはお勧めしません—ちょっと煩わしいです。でもオプションがあるのは良いことです。

ブラウザサポートの状況

正直に話しましょう：SVGファビコンのサポートは完璧ではありません。2025年時点の現実はこうです：

フルサポート：

Chrome 80+（デスクトップとAndroid）
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

サポートなし：

Safari（デスクトップとiOSの両方）
Internet Explorer
Android Browser

Safariが大きな問題です。Appleのブラウザはまだファビコンをサポートしておらず、これはユーザーの約20%がSVGアイコンを見られないことを意味します。フォールバックが必要です。

SVGファビコンを正しく実装する

フォールバック付きの基本セットアップ

すべてのユーザーをカバーするマークアップはこちら：

<head>
  <!-- 非常に古いブラウザ用ICOフォールバック -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- モダンブラウザ用SVG -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- Safari用PNGフォールバック -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon（SafariはSVGを使用しない） -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

順序が重要です。ブラウザはこれらを順番に解析し、サポートする最後のものを使用します。モダンブラウザはSVGを取得し、SafariはPNGを使用し、古いブラウザはICOにフォールバックします。

プロのヒント：ChromeがICOを使用するのを防ぐ

ChromeはSVGが利用可能な場合でもICOをダウンロードすることがあります。ICOリンクにsizes="32x32"を追加してください—これはChromeにICOがその特定のサイズ専用であることを伝え、スケーラブルなSVGを優先するようにします。

ダークモード適応SVGの作成

より完全な例はこちら：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

これはシステム設定に基づいて色が反転する文字入りの円形アイコンを作成します。

ファイルサイズの現実チェック

SVGは常に小さいと主張する人がいます。それは完全には正しくありません。実際のところ：

シンプルな幾何学的アイコン：SVGの勝ち、しばしば大差で
複雑なイラスト：PNGの方が実際に小さいかもしれない
写真や詳細なグラフィック：これらをファビコンとして使用しないでください

典型的なロゴスタイルのファビコン（形状、文字、シンプルなグラフィック）では、ファイルサイズの面でSVGがほぼ常に良い選択です。

最適化のヒント

SVGファビコンをデプロイする前に、SVGOMGまたは類似のオプティマイザーを通してください。IllustratorやFigmaのようなエクスポートツールは多くの不要なもの—メタデータ、エディタコメント、座標の不必要な精度—を追加します。

良い最適化でSVGサイズを50〜70%削減できます。

また、デザインをシンプルに保ってください。複雑なグラデーション、フィルター、数百のパスはファイルサイズを増加させるだけでなく、レンダリング遅延を引き起こす可能性があります。

テーマ検出について知っておくべきこと

SVG内のprefers-color-schemeメディアクエリは、ブラウザのテーマ設定ではなくオペレーティングシステムの設定に従います。誰かがmacOSをダークモードで使用しているがブラウザをライトテーマに設定している場合、ファビコンは依然としてダークモードスタイルになります。

これはほとんどのウェブサイトがダークモードを処理する方法と一致していますが、知っておく価値があります。

SVGに切り替えるべきか？

現在のファビコンがシンプルな形状やレターマークなら、SVGはおそらく価値があります。得られるもの：

多くのファイルの代わりに1つ
自動ダークモードサポート
より小さい合計ファイルサイズ
将来に対応したスケーラビリティ

ファビコンが詳細なイラストだったり、Safariユーザーが多い場合は、プライマリフォーマットとしてPNGを使い続けてください。

ほとんどのサイトに最適なアプローチは？両方を使用する。サポートするブラウザにはSVG、しないブラウザにはPNGフォールバック。設定に5分余計にかかり、100%のユーザーをカバーします。

クイック実装チェックリスト

[ ] SVGファビコンを作成（シンプルに保つ）
[ ] 必要に応じてダークモードメディアクエリを追加
[ ] SVGOMGで最適化
[ ] PNGフォールバックを作成（最低32x32）
[ ] apple-touch-icon.pngを作成（180x180）
[ ] フォールバック順序で適切なlinkタグを追加
[ ] Chrome、Firefox、Safariでテスト

それが本当にすべてです。SVGファビコンは複雑ではありません—ただ使われていないだけです。次のプロジェクトで試してみてください。

参考資料

Can I Use - SVG Favicons - SVGファビコンサポートのブラウザ互換性データ
Building an Adaptive Favicon - web.dev - 適応型ファビコン作成に関するGoogleのガイド
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - SVGファビコン機能の包括的な探求
How to Favicon in 2025 - Evil Martians - 実践的なモダンファビコン実装ガイド