faviconを動的に変更する(html5-canvas)

たまに見かける新着があった時にfaviconに1とか2とかでるやつを実装する時のメモ。
更新通知以外の使い道はパッと思い浮かびませんが、他にも何か使える場面があるかも。。

まずhtml側から。
headにid=”favicon”なlinkタグを入れておきます。

<!DOCTYPE html>
<html>
  <head>
    <link type="image/x-icon" id="favicon" rel="icon" href="/favicon.ico">
  </head>
  <body>
    <!-- // コンテンツ... -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="/fav.js"></script>
  </body>
 </html>

で、読み込まれるfav.jsはこんな感じ。

$(function(){
  // 何かの更新イベント
  changeFavicon('+5'); // faviconの上に+5を表示
});

function changeFavicon ( text ) {
    // 16x16のcanvasを用意
    var canvas = document.createElement("canvas");
    canvas.height = 16;
    canvas.width = 16;

    // favicon.icoの読み込み
    var img = new Image();
    img.onload = function() {
        var c = canvas.getContext('2d');

        // 現在のfaviconをcanvasに貼り付け(画像,x,y)
        c.drawImage(img,0,0);

        // font指定(太さ,サイズ,font)
        c.font ="900 16px serif";

        // 色指定
        c.fillStyle = "#FF0000";

        // 表示文字,表示位置(x),表示位置(y)
        c.fillText( text, 0, 16);

        // 生成された新しいfaviconを取得 
        var f = canvas.toDataURL('image/png');

        // 現在のfaviconを削除
        $('#favicon').remove();

        // headに新しいfaviconを入れる
        var newFav = '<link type="image/x-icon" id="favicon" rel="icon" href="'+ f +'">';
        $('head').append( newFav );
    }

    // 元のfavicon(下地)
    img.src = '/favicon.ico';
}

更新の取得は、AjaxとかWebSocketとかですかね。
上のjsは更新のイベントを入れていないので、このまま読み込めばいきなりfaviconの上に「+5」と表示されるはずです(最近のブラウザであれば・・)

faviconを動的に変更する(html5-canvas)

関連記事