SVG Favicon — 解像度に依存しないブラウザアイコン

SVG Favicon

SVG（Scalable Vector Graphics）Faviconは最新の形式オプションで、ラスター形式では実現できない解像度非依存性と動的機能を提供します。

SVG Faviconの利点

• 解像度非依存: 複数のファイルなしにどのディスプレイ密度でも鮮明に表示
• 小さなファイルサイズ: ベクターグラフィックスは同等のラスター画像より小さいことが多い
• CSSで動的: ダークモードサポート用にprefers-color-schemeに応答可能
• 単一ファイル: 1つのSVGが複数のPNGサイズを置き換える

実装

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- 未サポートブラウザ用PNGフォールバック -->
<link rel="alternate icon" href="/favicon.png" type="image/png">

ベストプラクティス

1. シンプルに保つ: 複雑なSVGは16x16相当ではうまく表示されない場合がある
2. viewBoxを使用: 適切なスケーリングのためにviewBoxを定義する
3. 小さいサイズでテスト: 実際のFaviconサイズでSVGがどのように見えるかプレビューする
4. フォールバックを含める: 古いブラウザ用に常にPNGフォールバックを提供する
5. 外部リソースを避ける: 外部スタイルシートや画像を参照しない

制限事項

• すべてのブラウザでサポートされていない（特にIEと古いSafari）
• Apple Touch Iconには使用できない（PNGでなければならない）
• Web Appマニフェストには使用できない（PNGでなければならない）