読者です 読者をやめる 読者になる 読者になる

faviconで動的に通知する仕組み

最近、こう言ったfaviconで新着件数を通知するサービスが多いですが

気になったので、githubで公開されているライブラリを覗いてみた。
tinycon(https://github.com/tommoor/tinycon)


この部分がポイントで、キャンバスで作成したデータをtoDataURL()で変換して

var setFaviconTag = function(url){
  removeFaviconTag();
		
  var link = document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'icon';
  link.href = url;
  document.getElementsByTagName('head')[0].appendChild(link);
};
setFaviconTag(getCanvas().toDataURL());


結果としてこういう形で挿入される。これでfaviconを動的に変更できる。

<link type="image/x-icon" rel="icon" href="data:image/png;base64,....">

このライブラリの大体の処理の流れは

  1. 既存のfaviconのURLを取得する(タグか,favicon.icoを見に行く)
  2. 取得したfaviconのURLをCanvasのdrawImage()で読み込む
  3. CanvasのfillStyle()で数字を入れる
  4. 既存のタグを削除する
  5. 新しいを挿入する