Santiago Santiago - 1 year ago 59
Javascript Question

Dynamic favicon using image manipulation similar to Gmail adding a count

I tried to figure it out looking at the source code but I couldn't figure it out.

I would like to know how to make a dynamic favicon with a count like Gmail does.

enter image description here

Any idea on how to do this?

Answer Source

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.


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


  (function () {
    var canvas = document.createElement('canvas'),
        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');
      img.src = 'image.png';



Must have an image set as well.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download