Dynamic favicon generation with Javascript

In my recent post about Browser tab’s icons I’ve come across nice idea of Remy Sharp (@rem). He suggests to use HTML5 Canvas and draw current day on Google Calandar icon. It’s a great feature to have on board so I’ve added it to my jQuery.favicon plugin.

So, how it works? It creates an image element, and hooks an onload event handler. When this onload event runs, it draws the image on to the canvas using ctx.drawImage(this, 0, 0). this refers to the image the onload event acted upon, and 0, 0 is the top, left position to start drawing. Next we call user callback to draw something on canvas. And finally using canvas.toDataURL() we set a new href to the shortcut icon’s link and append it to the document.

Let’s try it out. Here is a sample that draws 10 on icon. Click here to run it. More examples can be found here.

jQuery.favicon('mail_icon_32_new_message_active_w.png'
      , 'mail_icon_32_active.png'
      , function (ctx) {
  ctx.font = 'bold 15px "helvetica", sans-serif';
  ctx.fillStyle = '#FF00FF';
  ctx.fillText('10', 10, 27);
});

jQuery.favicon plugin’s page.