Dynamic favicon using image manipulation similar to Gmail adding a count

You can make an image with the canvas element, and then just replace the current favicon. Check out the following link for a good explanation on it.
Reference

Code is from the above reference.

Markup

<link id="favicon" rel="icon" type="image/png" href="image.png" /> 

JS

  (function () {
    var canvas = document.createElement('canvas'),
        ctx,
        img = document.createElement('img'),
        link = document.getElementById('favicon').cloneNode(true),
        day = (new Date).getDate() + '';
    
    if (canvas.getContext) {
      canvas.height = canvas.width = 16; // set the size
      ctx = canvas.getContext('2d');
      img.onload = function () { // once the image has loaded
        ctx.drawImage(this, 0, 0);
        ctx.font="bold 10px "helvetica", sans-serif";
        ctx.fillStyle="#F0EEDD";
        if (day.length == 1) day = '0' + day;
        ctx.fillText(day, 2, 12);
        link.href = canvas.toDataURL('image/png');
        document.body.appendChild(link);
      };
      img.src="https://stackoverflow.com/questions/6296574/image.png";
    }
    
    })();

Edit

Must have an image set as well.