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,....">

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

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