WEB NOTE
WEB関連の備忘録

ファビコンに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
}

PICK UP