追記(2020/2/21)
2020 年 2 月に Chrome 80 がリリースされ、それ以降であれば SVG favicon にも対応しました!
ダークモード時のスタイル適用にも対応しているようです(ダークモードでは背景色が違うので地味にうれしい機能)。これで Javascript を使ってまで無理やりな SVG favicon 化する必要はなくなりましたが、以前はこんな裏技もあったんよ、ということで記事はそのまま残しておきます。
…とは言うものの、いまだ favicon に SVG アニメーションは使えないようです。それを Javascript を用いて動的に切り替え、動画 favicon(厳密にはパラパラアニメ風)を実現するトリックとしてはまだ使えるようです。
参考サイト
以下、元記事
どういう理由はわからないが、Chrome では SVG ファイルをそのまま favicon に指定することができない。
<link rel="shortcut icon" type="image/svg+xml" sizes="any" href="/favicon.svg" />
こんな感じで設定したいのに、なぜかそれができない。Firefox は上のコードで問題ない
普通は素直に Photoshop や GIMP、ImageMagick 等を使って ico ファイルへ変換して対応するのだが、それでも無理やり SVG のまま設定したいって人は以下のとおりにすれば良い。
<script>
var img = new Image();
img.src = '/favicon.svg';
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
canvas.getContext('2d').drawImage(img, 0, 0);
var link = document.createElement('link');
link.type = 'image/png';
link.rel = 'shortcut icon';
link.href = canvas.toDataURL('image/png');
document.getElementsByTagName('head')[0].appendChild(link);
}
</script>
残念ながら Safari や IE・Edge はこの方法でも通用しないようだ…