Favicons dynamiques : afficher un badge ou un statut en direct
Ce badge rouge sur un onglet de navigateur n'est qu'un favicon redessiné. Voici comment le faire sans étape de build.
Pourquoi ne pas simplement utiliser un GIF ?
Vous pouvez définir un GIF animé comme favicon, mais la prise en charge est inégale. Firefox l'anime. Safari n'affiche que la première image. Le comportement de Chrome a changé au fil des versions. C'est suffisant pour de la décoration, mais c'est le mauvais outil pour un badge en direct, car vous ne pouvez pas modifier ce que le GIF affiche à l'exécution.
Pour un compteur ou un statut qui se met à jour pendant que l'onglet est ouvert, vous devez redessiner l'image en JavaScript. Un canvas vous offre un véritable tampon de pixels dans lequel peindre, puis à transmettre au link du favicon sous forme de data URI.
Comment ça marche
- 1
Chargez votre icône de base
Dessinez l'image normale de votre favicon sur un petit canvas, généralement 32x32. C'est l'icône que voient les utilisateurs quand il n'y a rien à signaler.
- 2
Peignez le badge par-dessus
Lorsqu'il y a un compteur, dessinez un petit cercle plein dans un coin et affichez le nombre à l'intérieur. Gardez un contraste élevé pour qu'il reste lisible à 32 pixels.
- 3
Remplacez le href du favicon
Affectez au href du link du favicon la sortie du canvas. Le navigateur repeint l'onglet avec votre nouvelle image immédiatement.
- 4
Mettez à jour à chaque changement
Relancez le dessiner-puis-remplacer chaque fois que le compteur change, et redessinez l'icône simple quand il retombe à zéro.
Le remplacement, en JavaScript pur
function setFaviconBadge(count) {
const canvas = document.createElement("canvas");
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext("2d");
// draw your base icon first (an <img> you preloaded)
ctx.drawImage(baseIcon, 0, 0, 32, 32);
if (count > 0) {
ctx.fillStyle = "#e5484d";
ctx.beginPath();
ctx.arc(23, 9, 9, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.font = "bold 12px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(count > 9 ? "9+" : String(count), 23, 10);
}
let link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement("link");
link.rel = "icon";
document.head.appendChild(link);
}
link.href = canvas.toDataURL("image/png");
}baseIcon est une Image que vous avez chargée une fois. Appelez setFaviconBadge(unread) chaque fois que le nombre change. Plafonnez l'affichage à 9+ pour que deux chiffres restent lisibles.
Questions fréquentes
Comment afficher un compteur de non-lus dans l'onglet du navigateur ?
Dessinez votre icône et un badge portant le nombre sur un canvas, puis affectez au href du link du favicon canvas.toDataURL(). Relancez l'opération chaque fois que le compteur change. Il n'existe pas d'API de badge d'onglet distincte pour les pages web classiques.
Puis-je utiliser un GIF animé comme favicon ?
Oui, mais la prise en charge est irrégulière. Firefox l'anime, Safari affiche la première image et Chrome a varié. Pour un badge en direct qui se met à jour, utilisez plutôt un canvas et remplacez le href.
Un favicon dynamique nuit-il aux performances ?
Non. Dessiner un canvas 32x32 et définir un data URI coûte très peu. Il suffit de redessiner uniquement quand la valeur change, et non sur une minuterie, et vous ne remarquerez pas le coût.