SVG faviconは、ウェブサイトのアイコン技術の最先端をいくものです。スケーラブルで、ダークモードに対応し、どんなサイズでも完璧に見える単一のファイルとして機能します。知っておくべきことをすべてご紹介します。
SVG Faviconを使う理由
- 無限にスケーラブル — 16px、32px、512px、またはどんなサイズでも鮮明に見えます。ピクセル化は一切ありません。
- 非常に小さいファイルサイズ — シンプルなSVG faviconは1KB未満にでき、どのPNGよりも小さくなります。
- ダークモード対応 — SVGはCSSの
prefers-color-schemeメディアクエリを使用して適応できます。 - すべてを統べる一つのファイル — 複数のサイズを用意する必要がありません（ただし、PNGのフォールバックはまだ必要です）。
ブラウザサポート (2026年)
| ブラウザ | SVG Faviconサポート |
|---|---|
| Chrome 80+ | はい |
| Firefox 41+ | はい |
| Edge 80+ | はい |
| Opera 67+ | はい |
| Safari | いいえ (Safari 18時点) |
| IE | いいえ |
主な制限事項: SafariはSVG faviconをサポートしていません。そのため、すべてのブラウザをカバーするには、PNG/ICOのフォールバックを必ず提供する必要があります。
SVG Faviconの実装方法
<!-- SVG favicon for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- PNG fallback for Safari and older browsers -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<!-- ICO fallback for very old browsers -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Apple Touch Icon (always PNG, SVG not supported) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">SVGをサポートするブラウザはそれを使用し、それ以外のブラウザはPNGまたはICOにフォールバックします。
ダークモードへの適応
SVG faviconの目玉機能は、アイコンがユーザーのカラースキームに自動的に適応できることです。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
circle { fill: #1d1d1f; }
text { fill: white; }
@media (prefers-color-scheme: dark) {
circle { fill: white; }
text { fill: #1d1d1f; }
}
</style>
<circle cx="50" cy="50" r="45"/>
<text x="50" y="65" text-anchor="middle"
font-family="system-ui" font-size="50" font-weight="bold">M</text>
</svg>ライトモードでは、明るい背景に暗いアイコン。ダークモードでは、暗い背景に明るいアイコン。JavaScriptは不要で、自動的に切り替わります。
SVG Faviconの作成
方法1: デザインツール
- Figma — アイコンをデザインし、選択してSVGとしてエクスポートします
- Illustrator — ファイル → 別名で保存 → SVG
- Inkscape — 無料のオープンソースベクターエディター
方法2: 手書きコーディング
シンプルなアイコンであれば、SVGを手書きで記述するのは迅速です。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="20" fill="#0071e3"/>
<text x="50" y="70" text-anchor="middle"
font-size="60" font-weight="bold" fill="white">F</text>
</svg>最適化のヒント
- ファイルサイズを最適化するにはSVGOMGを使用します
- 不要なメタデータ、コメント、エディター固有の属性を削除します
- パスはシンプルに保ちます — 複雑なグラデーションは小さいサイズではうまくレンダリングされない場合があります
- 常に
xmlns属性を含めます - 適切なスケーリングのために
viewBoxを設定します
2026年推奨の完全なセットアップ
SVGと従来のフォールバックを組み合わせることで、すべての利点を享受できます。
<!-- Modern: SVG with dark mode support -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback: Traditional favicon set -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Apple (no SVG support) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA -->
<link rel="manifest" href="/site.webmanifest">今日、SVG Faviconを使うべきでしょうか？
はい、ただし常にフォールバックと併用してください。 Safariの制限があるため、SVG単独に頼ることはできません。しかし、Chrome、Firefox、Edgeのユーザーにとっては、SVG faviconは特にダークモードをサポートしている場合、著しく優れた体験を提供します。