Dynamically generated favicon

EDIT: Got it working with

var canvas = document.createElement('canvas');
    canvas.width = 16;canvas.height = 16;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src="https://stackoverflow.com/favicon.ico";
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        ctx.fillStyle = "#F00";
        ctx.fillRect(10, 7, 6, 8);
        ctx.fillStyle="#FFFFFF";
        ctx.font="bold 10px sans-serif";
        ctx.fillText('2', 10, 14);

        var link = document.createElement('link');
        link.type="image/x-icon";
        link.rel="shortcut icon";
        link.href = canvas.toDataURL("image/x-icon");
        document.getElementsByTagName('head')[0].appendChild(link);
    }

You can actually run chrome and paste this:

javascript: var canvas = document.createElement('canvas');canvas.width = 16;canvas.height = 16;var ctx = canvas.getContext('2d');var img = new Image();img.src="https://stackoverflow.com/favicon.ico";img.onload = function() {ctx.drawImage(img, 0, 0);ctx.fillStyle = "#F00";ctx.fillRect(10, 7, 6, 8);ctx.fillStyle="#FFFFFF";ctx.font="bold 10px sans-serif";ctx.fillText('2', 10, 14);var link = document.createElement('link');link.type="image/x-icon";link.rel="shortcut icon";link.href = canvas.toDataURL("image/x-icon");document.getElementsByTagName('head')[0].appendChild(link);}

into the browser and see it in action.