Javascript 动态favicon使用图像处理，类似于Gmail添加计数

我试图通过查看源代码来理解它，但我无法理解

我想知道如何制作一个动态favicon与Gmail一样的计数

---

你知道怎么做吗？

你可以用

canvas

元素制作一个图像，然后替换当前的favicon。请查看下面的链接，以了解有关它的详细说明。

代码来自上述参考

标记

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

编辑

---

还必须有一个映像集。

请注意，Chrome的动态favicon实现有缺陷，并且占用了太多CPU。请参阅此代码所做的比第一句中所述的要多。加载后，如果画布上下文可用，它实际上是在“image.png”（脚本中给出的模板图像源，而不是

中的默认值）的顶部绘制的。此外，每次函数运行时（在本例中为一次），它都会向文档正文中添加一个元素（此处为非法：

）。因此，我会尝试省略

cloneNode（）

和

appendChild（）

，只更新原始链接href.document.getElementById（'favicon'）。href=canvas.toDataURL（'image/png'）？

  (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 = 'image.png';
    }
    
    })();