ファビコンにSVG形式を使う方法
ついにGoogleChromeやSafari、Edge、Firfoxなどの主要ブラウザでファビコンにSVG形式を使うことができるようになったみたい。
SVG形式はPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化することもないし、ダークモードに対応出来たりすることができます。
しかしIE11が非対応のため、別でビットマップ形式も併用する必要があります。はやくIE滅んでほしい。。。
SVGファビコンの対応状況
SVGファビコンの設置方法
SVG形式のファビコン用画像を用意する
まずはIllustratorなどのグラフィックツールでファビコンにしたい画像を用意します。製作時、サイズは正方形であれば問題ないです。
HTMLにファビコン設定のコードを記述
これまでと同様に、head内にファビコン設置するコードを記述します。SVG用コードは以下の通りです。
<link rel="icon" href="img/favicon.svg" type="image/svg+xml">今までと違い、type属性を” image/svg+xml “に置き換えるだけです。
ダークモード対応方法
ダークモードに対応させるには、通常の対応方法同様、SVG内のCSSにダークモード用のメディアクエリーを追加するだけです。
@media (prefers-color-scheme: dark) {
ダークモード用CSS
}