WEB

2020.02.14

ファビコンもSVG形式に対応!

ベクターなので拡大縮小しても画質が劣化しないSVG形式。
遂にファビコンにも対応されるようになりました。

SVG形式のファビコンの導入の仕方

通常のファビコンと同じように<head>要素の中に入れます。

<head>
<link rel="icon" href="【ここはファビコンのパス】" type="image/svg+xml">
</head>

これまでとの違いはtype属性が「image/svg+xml」に変わった事です。

Chrome , Firefox , Safari等の主要ブラウザに対応の上、Edgeにも対応しているとの事。

ただし、IEは対応していない様なので注意が必要で、念のためPNG形式のファビコンもこれまでと同じように用意しておくと良いと思います。

<head>
<link rel="icon alternate" href="【ここはPNGファビコンのパス】" type="image/png">
<link rel="icon" href="【ここはSVGファビコンのパス】" type="image/svg+xml">
</head>

IEに対応していないとはいえ、色々なサイズで使いまわしが効くSVG形式のファビコンは今後の主流になっていきそうです。

応用としてダークモードに対応させる事も出来るようなので、今のうちの慣れておくと良いですね～

WEBディレクター、デザイナー、フロントエンドエンジニア、投資家、会社オーナー 2007年に同志と起業、2009年に法人化、2018年にHira's.netを設立。
WEBデザイン、コーディング、ディレクター等WEB制作全般に幅広く携わっています。