canvasでbase64を生成し動的にfavicon差し替える

kimizuka.hatenablog.com

以前base64でfaviconを設定してみましたが、今回は動的に差し替えてアニメーションするfaviconをつくってみたいと思います。
方針として、画像をたくさん用意するのがめんどうなのでcanvasをつかってbase64を動的に生成しまくって都度設定していこうと思います。

ソースコード

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml">
    <meta charset="UTF-8" />
    <title>Favicon base64</title>
    <link id="favicon" rel="shortcut icon" href="" />
</head>
<body> 
</body>
</html>

JavaScript

(function(win, doc) {

    "use strict";
    
    var favicon = doc.getElementById("favicon"),
        canvas = doc.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        color = 0,
        SIZE = 32;
    
    (function draw() {
        canvas.width  = SIZE;
        canvas.height = SIZE;
        
        color = ++color % 255;
        
        ctx.fillStyle = "rgb(" + color + ", " + color + ", " + color + ")";
        ctx.fillRect(0, 0, SIZE, SIZE);
        
        favicon.setAttribute("href", canvas.toDataURL("image/png"));
        
        setTimeout(draw, 50);
    })();
    
})(this, document);