SVGファビコン完全ガイド｜作り方・ダークモード対応・フォールバック実装まで

SVGファビコンが「使える」時代になった

SVGをファビコンに使う最大のメリットは、どんなサイズでもくっきり表示されること。16pxのタブでも512pxのPWAアイコンでも、ベクターなので劣化しません。加えて、CSSメディアクエリを埋め込むことでダークモード自動対応もできます。

かつてはSafariが非対応という大きな壁がありましたが、Safari v26（2025年後半リリース）でついに対応。2026年3月時点で ブラウザシェア約90% をカバーしており、実務で採用できる段階に入りました。

この記事では、SVGファビコンの作り方からダークモード対応、フォールバック実装、最適化まで、実装に必要な知識をひととおり解説します。

ファビコンに使えるファイル形式全体の比較は以下の記事で解説しています。

関連記事ファビコンの拡張子・ファイル形式ガイド｜ICO・PNG・SVGどれを使うべき？ファビコン（favicon）に使える拡張子・ファイル形式を徹底比較。ICO・PNG・SVG・GIF・WebPのブラウザ対応状況、HTMLの書き方、2026年の推奨構成まで実務目線で解説。

SVGファビコンのブラウザ対応状況

まず対応状況を押さえておきましょう。

Safari v26以前（v3.1〜v25）は非対応のため、フォールバックは必須です。具体的な実装方法はこの記事の後半で解説します。

基本の実装：HTMLへの追加

SVGファビコンの指定はシンプルです。

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

type="image/svg+xml" がポイントです。これがないとブラウザがSVGとして認識しない場合があります。

SVGファビコンの作り方

方法1：テキストエディタで手書き

もっともファイルサイズを小さくできる方法です。シンプルなアイコンなら数行で書けます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#2563eb" />
  <text x="16" y="22" text-anchor="middle"
        font-size="20" font-weight="bold"
        font-family="Arial, sans-serif" fill="#fff">F</text>
</svg>

この例は角丸四角の背景に白い「F」の文字を配置したものです。わずか200バイト前後で完結します。

方法2：Figmaからエクスポート

1. 32×32pxのフレームでデザインを作成
2. メニューから「Export」→「SVG」を選択
3. エクスポートしたファイルをSVGOで最適化（後述）

Figmaでエクスポートしたsvgにはメタデータが含まれるため、最適化を行うとファイルサイズが半分以下になることもあります。

方法3：Illustratorからエクスポート

1. アートボードを32×32pxに設定
2. 「ファイル」→「書き出し」→「書き出し形式」→SVG
3. SVGオプションで「インラインスタイル」を選択、小数点以下1桁に設定

Illustratorは不要なメタデータ（<metadata>タグ等）を付加するため、こちらもSVGOでの後処理を推奨します。

方法4：当サイトのデザイナーで作成してSVGに変換

当サイトのファビコンデザイナーで図形やテキストを配置してデザインし、PNGでダウンロードしたあとベクター変換する方法もあります。ただしSVGネイティブな制作フローの方が品質は高くなります。

ダークモード対応の実装

SVGファビコンならではの強力な機能がダークモード自動切替です。SVGファイル内にCSSを埋め込むことで、ユーザーのOSテーマに応じてデザインが自動的に変わります。

基本パターン：色の反転

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #1e40af; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #60a5fa; }
      .fg { fill: #1e293b; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6" />
  <text class="fg" x="16" y="22" text-anchor="middle"
        font-size="20" font-weight="bold"
        font-family="Arial, sans-serif">F</text>
</svg>

ライトモードでは濃い青背景に白文字、ダークモードでは明るい青背景に暗い文字に切り替わります。

パターン2：背景を透明にして文字色だけ変える

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon { fill: #1e293b; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #e2e8f0; }
    }
  </style>
  <text class="icon" x="16" y="24" text-anchor="middle"
        font-size="28" font-weight="bold"
        font-family="Arial, sans-serif">F</text>
</svg>

背景なしのミニマルなスタイルです。ブラウザのタブ背景色に馴染むため、洗練された印象になります。ただし、タブの背景色が中間色の場合に見えにくくなるリスクがあるため、背景色ありのパターンの方が安全です。

パターン3：アイコンの形状自体を変える

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .light-only { display: block; }
    .dark-only { display: none; }
    @media (prefers-color-scheme: dark) {
      .light-only { display: none; }
      .dark-only { display: block; }
    }
  </style>
  <!-- ライトモード：塗りアイコン -->
  <g class="light-only">
    <rect width="32" height="32" rx="6" fill="#1e40af" />
    <text x="16" y="22" text-anchor="middle" font-size="20"
          font-weight="bold" fill="#fff" font-family="Arial">F</text>
  </g>
  <!-- ダークモード：線画アイコン -->
  <g class="dark-only">
    <rect x="1" y="1" width="30" height="30" rx="5"
          fill="none" stroke="#60a5fa" stroke-width="2" />
    <text x="16" y="22" text-anchor="middle" font-size="20"
          font-weight="bold" fill="#60a5fa" font-family="Arial">F</text>
  </g>
</svg>

display: none/block で要素ごと切り替える高度なパターンです。ライトモードでは塗りのアイコン、ダークモードでは線画のアイコンというように、まったく異なるデザインにできます。

SVGの最適化

ファビコン用SVGは小さければ小さいほど良いです。読み込み速度に直結します。

手動の最適化ポイント

• 不要な属性を削除: xmlns:xlink、xml:space、data-name などエディタが付加するメタ属性
• <metadata> と <defs> の空タグを削除: Illustratorが頻繁に付加する
• 小数点を減らす: x="16.000" → x="16"、rx="5.5000" → rx="5.5"
• viewBox を 0 0 32 32 に統一: ファビコンとして使いやすいサイズ
• 色指定を短縮: fill="#ffffff" → fill="#fff"

SVGOによる自動最適化

SVGOはSVGの自動最適化ツールです。CLIで使えます。

npx svgo favicon.svg -o favicon.min.svg

ファビコン用の推奨設定:

npx svgo favicon.svg --config='{"plugins":[{"name":"preset-default","params":{"overrides":{"removeViewBox":false}}}]}'

removeViewBox: false は重要です。viewBoxを削除するとファビコンのスケーリングが壊れます。

ファイルサイズの目安

PNGの32x32が通常1〜3KBであることを考えると、シンプルなSVGならPNGより軽いケースも多いです。

フォールバック実装（SVG非対応ブラウザ対策）

SVGファビコンの対応率は約90%ですが、残り10%（古いSafari、IE等）への対策も必要です。

推奨するHTML構成

<!-- 1. ICO: sizes指定でChromeにSVGを優先させる -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- 2. SVG: モダンブラウザ向け（ダークモード対応可能） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- 3. Apple Touch Icon: iOSホーム画面用（PNGのみ） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

ポイントはICOに sizes="32x32" を付けることです。こうするとChrome/Edgeは「ICOは32px専用、SVGは任意のサイズに対応」と判断してSVGを優先的に選択します。この指定がないと、ChromeがICOを優先してしまいSVGのダークモード機能が活かされないケースがあります。

/favicon.ico はルートディレクトリにも配置しておきましょう。HTMLの <link> を解釈しない一部のクローラーやブックマークツールが直接 /favicon.ico を取得しに来るためです。

ブラウザの選択動作

この構成で、すべてのブラウザ・デバイスで適切なファビコンが表示されます。

ICOファイルの作成には変換ツールを、全サイズのPNGをまとめて準備するには一括生成ツールを使うと便利です。

アニメーションSVGファビコン

SVGではSMILやCSSアニメーションを使って動くファビコンを作ることも技術的には可能です。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .dot { animation: pulse 2s ease-in-out infinite; }
  </style>
  <rect width="32" height="32" rx="6" fill="#2563eb" />
  <circle class="dot" cx="16" cy="16" r="4" fill="#fff" />
</svg>

ただし、実用面では注意が必要です。

• Chromium系（Chrome、Edge）はSMILアニメーションをドキュメント読み込み時から再生。ただしタブがバックグラウンドに回ると一時停止する
• Firefoxはアニメーションを再生するが、挙動がChromiumと異なる場合がある
• ユーザーの気が散る原因になる。タブのアイコンが常に動いているのはUX上好ましくない

通知のような一時的な演出以外では、静的なSVGにとどめるのが無難です。アクセシビリティの観点からは、prefers-reduced-motion メディアクエリでアニメーションを無効化できるようにしておきましょう。

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}

SVGファビコンのデバッグ

「SVGを設定したのに表示されない」——そんなときのチェックリストです。

1. MIMEタイプを確認

サーバーが .svg ファイルを image/svg+xml で配信しているか確認してください。デベロッパーツール（F12）→ Networkタブで該当リクエストのResponse Headersを見ます。Content-Type が text/plain や application/octet-stream になっている場合は、サーバーの設定を修正する必要があります。

2. HTMLの type 属性を確認

<!-- NG: type指定がない -->
<link rel="icon" href="/favicon.svg">

<!-- OK: type指定あり -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

3. SVGファイル自体が正しいか確認

ブラウザで https://yoursite.com/favicon.svg に直接アクセスして、画像が正しく表示されるか確認してください。XMLの構文エラーがあるとブラウザはSVGをファビコンとして読み込みません。

4. キャッシュをクリア

ファビコンはブラウザに強くキャッシュされます。変更後はスーパーリロード（Ctrl+Shift+R / Cmd+Shift+R）またはシークレットモードで確認してください。

5. 自サイトのファビコン設定を分析

当サイトの分析ツールにURLを入力すると、HTMLの <link> タグから検出されたすべてのファビコン（SVG・PNG・ICO）を一覧表示できます。設定漏れのチェックに使えます。

よくある質問（FAQ）

Q. SVGファビコンだけで運用できる？フォールバックは本当に必要？

2026年時点ではフォールバックを推奨します。SVGのブラウザ対応率は約90%ですが、残り10%のユーザー（古いSafariやIE）ではファビコンが表示されません。favicon.ico をルートに置いておくだけのコストでカバーできるので、省略する理由はありません。

Q. sizes="any" は必要？

<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg"> と書くことがありますが、sizes="any" は省略しても問題なく動作します。ブラウザは type="image/svg+xml" を見てSVGだと判断するため、sizes はなくても構いません。

Q. SVGファビコンはviewBoxのサイズをいくつにすべき？

一般的には32×32が使いやすいです。SVGはベクターなのでviewBoxのサイズは表示に影響しませんが、座標指定がpx単位に近くなるため、制作時の感覚が掴みやすくなります。

Q. フォントの埋め込みは必要？

SVGファビコンでテキストを使う場合、指定したフォントがユーザーの環境にない可能性があります。font-family にフォールバックを指定するか（例: font-family="Arial, Helvetica, sans-serif"）、テキストを <path> に変換（アウトライン化）してしまうのが確実です。

Q. 既存のサイトのSVGファビコンを確認するには？

当サイトの分析ツールにURLを入力すると、設定されているファビコンをすべて検出できます。SVGが設定されていれば一覧に表示され、PNGやICOのフォールバックと合わせて確認できます。

まとめ

SVGファビコンは「モダンブラウザ向けのベストな選択肢」です。ICO/PNGのフォールバックと組み合わせれば、すべてのブラウザ・デバイスをカバーできます。

各形式の詳しい比較は以下の記事で解説しています。

関連記事ファビコンの拡張子・ファイル形式ガイド｜ICO・PNG・SVGどれを使うべき？ファビコン（favicon）に使える拡張子・ファイル形式を徹底比較。ICO・PNG・SVG・GIF・WebPのブラウザ対応状況、HTMLの書き方、2026年の推奨構成まで実務目線で解説。

ファビコン画像の準備がまだの方は、こちらも参考にしてください。

関連記事ファビコンの作り方｜無料で簡単に作成する3つの方法【2026年最新】ファビコン（favicon）を無料で作成する方法を3パターン紹介。画像からの変換、テキストでの自作、図形を組み合わせたデザインまで、目的別に手順をわかりやすく解説します。