SVG ファビコン：対応状況・ダークモード・フォールバック

ラスターのファビコンは、書き出し時に下したサイズの決定です。SVG はそうではありません。ブラウザは表示面が必要とするサイズでその都度ラスタライズするので、16 ピクセルのタブも 32 ピクセルのブックマークバーも、通常 1 枚の PNG より小さい一枚のファイルから同じ鮮明な結果を得られます。

難点は対応が不均一なことで、SVG ファビコンはアイコンセットの残りの代わりにはなりません。Android と iOS のインストール済みアプリの表示面は依然として PNG を求め、Safari もタブアイコンにはラスターの経路を必要とします。SVG は、機能している PNG と ICO のセットアップの上に重ねるアップグレードとして扱いましょう。

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

image/svg+xml を理解するブラウザは SVG を採り、それ以外は ICO に落ちます。ユーザーエージェントの判別は不要です。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #111111 }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff }
    }
  </style>
  <path d="M20 80 L50 20 L80 80 Z" />
</svg>

スタイルは SVG の内部に置かなければなりません。ファビコンのために外部スタイルシートは読み込まれません。SVG ファビコンに対応するブラウザは概ねこれを尊重し、対応しないものは単にラスターのフォールバックを使います。