8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Chrome でも favicon に SVG を

Last updated at Posted at 2019-06-17

追記(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 はこの方法でも通用しないようだ…

【参考】各ブラウザの対応状況

https://caniuse.com/#feat=link-icon-svg

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?