Dynamic favicon utilisant une manipulation d'image similaire à Gmail ajoutant un compte

J'ai essayé de comprendre le code source, mais je ne pouvais pas le comprendre.

Je voudrais savoir comment faire un favicon dynamique avec un compte tel que Gmail le fait.

Entrez la description de l'image ici

Dddddddddélbeélélineélélineélénéldiceélachélénéléléleaélénéléleadiceeaeaeaeaeaea

Vous pouvez créer une image avec l'élément de canvas , puis remplacez le favicon actuel. Consultez le lien suivant pour une bonne explication. Référence

Le code provient de la référence ci-dessus.

Marquage

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

modifier

Doit avoir un ensemble d'images aussi.