SVG形式のファビコンを設置しよう
つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！
SVGファビコン設置方法
1. SVG形式のファビコン用画像を用意
グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。
SVG形式で保存します。
2. HTMLファイルに記述
あとはこれまでと同様、 head 内にファビコンを設置する記述を追加。これまでと違う点は type 属性を image/svg+xml としているところですね。
HTML
1 2 3 4 5 | <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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | <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, Safari, Firefox, Edgeなどの主要ブラウザーに対応しています。IEには対応していないのでご注意を。対応していないブラウザー用には念の為、PNG形式のファビコンを用意して設置しておくといいでしょう：
HTML
1 2 | <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ファビコンが主流になるかと思います。今のうちに覚えておくといいですね！
