Dynamische Favicons: ein Badge oder Live-Status anzeigen
Dieses rote Badge auf einem Browser-Tab ist nur ein Favicon, das neu gezeichnet wird. So machst du das ohne Build-Schritt.
Warum nicht einfach ein GIF?
Du kannst ein animiertes GIF als Favicon setzen, aber die Unterstützung ist uneinheitlich. Firefox animiert es. Safari zeigt nur den ersten Frame. Das Verhalten von Chrome hat sich über die Versionen verändert. Für Deko ist das in Ordnung, aber für ein Live-Badge ist es das falsche Werkzeug, weil du zur Laufzeit nicht ändern kannst, was das GIF anzeigt.
Für eine Zahl oder einen Status, der sich aktualisiert, während der Tab offen ist, musst du das Bild in JavaScript neu zeichnen. Ein Canvas gibt dir einen echten Pixel-Puffer, in den du malen und den du dann als Data URI an die Favicon-Tag übergeben kannst.
So funktioniert es
- 1
Lade dein Basis-Icon
Zeichne dein normales Favicon-Bild auf ein kleines Canvas, typischerweise 32x32. Das ist das Icon, das Nutzer sehen, wenn es nichts zu badgen gibt.
- 2
Male das Badge darüber
Wenn eine Zahl ansteht, zeichne einen kleinen gefüllten Kreis in eine Ecke und rendere die Zahl darin. Halte es kontraststark, damit es bei 32 Pixeln lesbar bleibt.
- 3
Tausche den Favicon-href aus
Setze den href der Favicon-Tag auf die Canvas-Ausgabe. Der Browser zeichnet den Tab sofort mit deinem neuen Bild neu.
- 4
Bei Änderung aktualisieren
Führe das Zeichnen und Austauschen erneut aus, wann immer sich die Zahl ändert, und zeichne das schlichte Icon neu, sobald sie auf null fällt.
Der Austausch, in reinem JavaScript
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 ist ein Image, das du einmal geladen hast. Rufe setFaviconBadge(unread) auf, wann immer sich die Zahl ändert. Begrenze die Anzeige auf 9+, damit zwei Ziffern lesbar bleiben.
Häufige Fragen
Wie zeige ich eine Ungelesen-Zahl im Browser-Tab?
Zeichne dein Icon und ein Badge mit der Zahl auf ein Canvas und setze dann den href der Favicon-Tag auf canvas.toDataURL(). Führe das erneut aus, wann immer sich die Zahl ändert. Für normale Webseiten gibt es keine eigene Tab-Badge-API.
Kann ich ein animiertes GIF als Favicon verwenden?
Kannst du, aber die Unterstützung ist uneinheitlich. Firefox animiert es, Safari zeigt den ersten Frame und Chrome war unterschiedlich. Für ein Live-Badge, das sich aktualisiert, nimm stattdessen ein Canvas und tausche den href aus.
Beeinträchtigt ein dynamisches Favicon die Performance?
Nein. Ein 32x32-Canvas zu zeichnen und einen Data URI zu setzen, ist günstig. Zeichne einfach nur dann neu, wenn sich der Wert ändert, nicht über einen Timer, und du wirst die Kosten nicht bemerken.