SVG favicon：いつ使うべきか、そして今も必要なICO
1つのSVGは、最新のブラウザでもっともくっきりしたfaviconになり得ます。しかも、1つのファイルからダークモードへ切り替えられます。ただし唯一のアイコンにはなれません。そこで、それがどこに収まり、.icoやPNGに何を残すのかを解説します。
SVG faviconが得意なこと
faviconは場面によって大きく異なるサイズで描かれますが、1つのSVGはそのすべてを単一のファイルからカバーします。固定のピクセルグリッドではなくベクターなので、どのディスプレイでもくっきりしたままです。ぼやけた拡大もなく、同期を保つべき16、32、48ピクセルの個別の書き出しもありません。
ラスターアイコンには真似できない、もう1つの技があります。SVG内のprefers-color-schemeメディアクエリにより、OSがダークモードに切り替わると同じファイルが自分自身を再着色します。そのため、2枚目の画像を配信することなく、暗いタブ列に対してもマークが読みやすいままです。
フォールバックとともにリンクする
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">SVGを理解するブラウザは、最初の行を優先します。それ以外はすべて、SVGを理解しない場面のためにあります。
SVGが機能する場面と、しない場面
| 場面 | SVGを使う？ |
|---|---|
| 最新のブラウザのタブ | はい、しかもそこがもっともきれいに見えます |
| 古いブラウザ | いいえ、.icoまたはPNGにフォールバックします |
| /favicon.ico のパス | いいえ、そのリクエストには本物の.icoが必要です |
| iOSのホーム画面 | いいえ、apple-touch-iconのPNGを使います |
| AndroidとPWAのインストール | いいえ、マニフェストからPNGアイコンを読みます |
SVGをダークモードに適応させる
SVG自身のスタイルにprefers-color-schemeメディアクエリを入れ、OSのテーマが変わったときに塗りの色を切り替えさせましょう。すると1つのファイルが、明るいブラウザUIでも暗いブラウザUIでも正しく表示されます。これがテーマ対応faviconを扱うもっともスマートな方法です。
メディアクエリを管理したくなければ、どちらの背景でも生き残るだけの十分なコントラストを持つ、単一の中間色のマークが、同じ目標へのよりシンプルな道です。
よくある質問
SVG faviconを使うべきですか？
ブラウザのタブにはぜひ。1つのファイルで、完璧に拡大縮小でき、ダークモードにも適応できます。ただし、SVGを読まない場面もカバーできるよう、favicon.icoとPNGのapp iconと組み合わせましょう。
すべてのブラウザがSVG faviconに対応していますか？
最新のブラウザのほとんどは対応していますが、すべてではなく、ホーム画面の場面はどれも使いません。だからこそ、SVGだけに頼るのではなく、.icoとPNGをフォールバックとして残すのです。
SVGがあっても、まだfavicon.icoは必要ですか？
はい。ブラウザ、クローラー、フィードリーダーは、今も /favicon.ico をパスで要求し、そのリクエストにはSVGで応えられません。本物の.icoをサイトのルートに残しておきましょう。
SVG faviconはダークモードに対応できますか？
はい、それが利点の1つです。SVG内のprefers-color-schemeメディアクエリが、OSのテーマ切り替え時に再着色するため、1つのファイルが明るいブラウザUIでも暗いブラウザUIでも機能します。