SVG形式のファビコンを設置しよう
つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！
↑私が10年以上利用している会計ソフト！
SVGファビコン設置方法
1. SVG形式のファビコン用画像を用意
グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。
SVG形式で保存します。
2. HTMLファイルに記述
あとはこれまでと同様、 head 内にファビコンを設置する記述を追加。これまでと違う点は type 属性を image/svg+xml としているところですね。
HTML
<head>
<meta charset="utf-8">
<title>SVG Favicon</title>
<link rel="icon" href="images/favicon.svg" type="image/svg+xml">
</head>
完成！
設置完了です！これまでと変わらない手順で設置できました。簡単ですね！SVGなのでラインもとってもきれい！
ダークモードに対応させよう
SVG形式のいいところをもう少し見てみましょう。「Webサイトをダークモードに対応させよう」という記事でも取り上げた、ダークモードにも対応できますよ。SVGファイルをエディターで開き、style タグを使って直接CSSを記述します。この例では通常モードだと #0bd (= 水色)で表示され、ダークモードには @media (prefers-color-scheme: dark) を使って #faa (= ピンク) になるよう設定しています。
SVG
<svg version="1.1" id="Layer_1" .......>
<style>
path {
fill: #0bd;
}
@media (prefers-color-scheme: dark) {
path {
fill: #faa;
}
}
</style>
<g>
<path d="M32,16c0,8.8-7.2,16-16......./>
</g>
</svg>
完成です！ダークモードにすると色が変わるのがわかりますね！デモページを用意したので、実際にページを開いてダークモードに切り替えて変化を見てみてください！
SVGファビコンのブラウザー対応状況
Chrome, Firefox, Edgeなどの主要ブラウザーに対応しています。Safariでは固定タブ（Pinned tab）用のアイコンにSVGが利用できます。その場合用意するSVGに複数の色は加えられず、黒一色であることと、link タグに非公式の rel="mask-icon" 属性が必要です：
HTML
<link rel="mask-icon" sizes="any" href="images/favicon.svg" color="#0bd">
IEには対応していないのでご注意を。対応していないブラウザー用には念の為、PNG形式のファビコンを用意して設置しておくといいでしょう：
HTML
<link rel="icon" href="images/favicon.svg" type="image/svg+xml"> <link rel="icon alternate" href="images/favicon.png" type="image/png">
ちなみにダークモードに対応させるための prefers-color-scheme も、IEには対応していません。ぐぬぬ。
とは言え、今後はSVGファビコンが主流になるかと思います。今のうちに覚えておくといいですね！
