Favicon dynamique utilisant la manipulation d'images, similaire à l'ajout d'un compte par Gmail

Question

J'ai essayé de comprendre en regardant le code source mais je n'ai pas réussi à le faire.

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

Une idée sur la manière de procéder ?

Answer 1

Vous pouvez créer une image avec le canvas et remplace simplement le favicon actuel. Consultez le lien suivant pour obtenir une bonne explication à ce sujet. Référence

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

Balisage

<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

Il doit aussi avoir une image.

Answer 2

Vérifiez ce projet pour voir comment faire une manipulation amusante de la favicon :) Peut-être cela vous mettra-t-il sur la bonne voie

Answer 3

Regardez ce projet : http://lab.ejci.net/favico.js . L'examen du code source peut vous donner quelques idées sur la manière d'obtenir un tel effet.

Answer 4

Une favicon n'est rien d'autre qu'un fichier .ico (ou même un fichier .gif renommé).

Vous pouvez générer l'image dynamiquement (via un serveur). Il peut même s'agir d'un gif animé qui, après avoir été renommé en favicon.ico fonctionnera (certains navigateurs comme IE (et même Safari) ne prennent pas en charge les favicons animés).