【歓喜】SVGがfaviconに対応！これでいろんなサイズの画像を用意しなくてOK！

みなさんは、faviconの作成どうされてますか？

私は以前ご紹介した下記のような方法でfaviconを大量に作成しサイトにアップロードして
いろんな端末でちゃんと表示されるようにしています。

しかしながら！ついにファビコンもSVG形式が対応されるようになったようです。
これでめんどくさいことをしなくても、どんなに拡大縮小しようがサイズに合わせて綺麗な画像を表示できます。

では作り方をご紹介しましょう！

まずはイラストレータなどでfaviconを作成し、SVGで保存します。
ウェブでSVGをよく使用する人はこなれている作業ですよね！

下記のようにhead内にソースを埋め込めば…！

<head>
    <meta charset="utf-8">
    <title>サイト名を記載</title>
    <link rel="icon" href="/site/images/favicon.svg" type="image/svg+xml">
</head>

もうこれで完成です！あっという間ー！！

IEには対応していないという問題点も…

とっても便利なSVGのfaviconですが、IEに対応していないという問題点もあります。

Can I Use　で確認！

そのため、IE対策用に下記のように画像を埋め込んでおいてあげましょう♪
これでばっちりです！

みなさんもSVGで対応してみてくださいね★

<link rel="icon" href="/site/images/favicon.svg" type="image/svg+xml">
<link rel="icon alternate" href="/site/images/favicon.png" type="image/png">

Creator Note