Animierte Favicons in der Praxis: den Browser-Tab in Bewegung versetzen (mit Live-Demo)

Vermutlich hast du beim Lesen schon bemerkt, dass sich oben am Tab etwas bewegt. Das ist ein animiertes Favicon — derselbe Trick, mit dem Gmail neue Mails zählt und Discord seine Benachrichtigungspunkte zeigt, nur dass deins so ziemlich alles tun kann, was du auf einem Canvas zeichnen kannst.

Dieser Artikel enthält eine Demo, mit der du dich austoben darfst. Klick einen Button, schau, wie sich dein echter Browser-Tab verändert. Keine Screenshots, keine eingebetteten Videos — das Favicon, das du gerade siehst, ist die Demo selbst.

Warum überhaupt ein Favicon animieren?

Ehrlich gesagt sollten die meisten Seiten das nicht tun. Ein sich drehendes Symbol in jedem Tab nervt schnell und kostet CPU-Zeit. Es gibt aber ein paar Fälle, in denen es echt nützlich ist:

Lade- oder Verarbeitungszustände. Lange Uploads, Exports, Builds. Nutzer wechseln den Tab, während sie warten — ein animiertes Favicon signalisiert, dass die Arbeit weiterläuft.
Benachrichtigungs-Badges. Neue Nachrichten, Erwähnungen, Alerts. Ein dezent pulsierender roter Punkt fällt schneller auf als ein statischer.
Live-Daten. Trading-Dashboards, Monitoring-Tools, Spielstände — überall dort, wo der Tab-Titel nicht reicht.
Markenmomente. Ein Festtags-Spinner, eine Launch-Day-Feier. Dosiert einsetzen.

Passt dein Anwendungsfall in keine dieser Kategorien, lass die Animation weg. Ein gutes statisches SVG-Favicon gewinnt sowieso bei Dateigröße, Dark Mode und Akkulaufzeit.

Live-Demo: jetzt selbst ausprobieren

Wähl eine Animation. Schau dann nach oben in den Tab — das winzige Symbol da wird neu gezeichnet.

8×-Zoom-Vorschau

Das echte Favicon ist nur 16×16 Pixel groß. So winzig sieht man kaum Details, deshalb spiegelt der Kasten links denselben Canvas in 8-facher Vergrößerung mit Nearest-Neighbor-Skalierung.

Status: untätig

Die gesamte Animationsschleife läuft jetzt komplett in einem Web Worker, genau wie favicon_worker.js in der Aymkdn-Bibliothek. Alle 20 ms (50fps) zeichnet der Worker auf seinen OffscreenCanvas, exportiert das Ergebnis per convertToBlob + FileReader und schickt die entstandene Data-URL an die Seite zurück. Der Hauptthread macht nur eines: er weist diesen String an faviconLink.href zu. Deshalb bewegt sich das Symbol nun so flüssig wie in der GitHub-Demo.

Du willst das Muster in einem echten Produkt sehen? Random Picker Wheel verwendet ein animiertes Favicon, das das drehende Glücksrad nachbildet — ein rotationsbasiertes UI ist einer der seltenen Fälle, in denen ein bewegtes Icon wirklich zum Produkt passt. Öffne die Seite, dreh am Rad, und beobachte, wie das Tab-Icon mitdreht.

Was wirklich passiert

Drei Schritte. Mehr ist die Technik nicht:

// 1. Favicon-Link-Element holen oder anlegen
let link = document.querySelector('link[rel~="icon"]');
if (!link) {
  link = document.createElement('link');
  link.rel = 'icon';
  document.head.appendChild(link);
}

// 2. Einen Frame in einem versteckten Canvas zeichnen
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');

function drawFrame(t) {
  const scale = 0.5 + 0.5 * Math.abs(Math.sin(t / 400));
  ctx.clearRect(0, 0, 32, 32);
  ctx.fillStyle = '#ef4444';
  ctx.beginPath();
  ctx.arc(16, 16, 14 * scale, 0, Math.PI * 2);
  ctx.fill();

  // 3. Canvas als Data-URL exportieren und an das Favicon binden
  link.href = canvas.toDataURL('image/png');

  requestAnimationFrame(drawFrame);
}

requestAnimationFrame(drawFrame);

Etwa 15 Zeilen für einen pulsierenden Punkt. Alles aufwendigere zeichnet bloß andere Formen auf den Canvas.

Die Wahrheit über Browser-Support

Hier wird es unschön. Wie aggressiv die Browser das Favicon animieren, schwankt deutlich:

Firefox: animiert auch dann flüssig, wenn der Tab nicht im Vordergrund ist. Die Referenz.
Chrome / Edge: animieren, solange der Tab aktiv ist. Wechselt man weg, drosselt requestAnimationFrame auf etwa einmal pro Sekunde, die Animation wird also langsam oder bleibt stehen.
Safari: animiert im Vordergrund, aktualisiert das Symbol aber manchmal nur in groben Abständen. Verlass dich nicht auf Geschmeidigkeit.

Für die häufigsten Anwendungsfälle — Benachrichtigungspunkte, Fortschrittszustände — ist das eigentlich kein Problem, weil sie ohnehin nicht mehrmals pro Sekunde aktualisiert werden müssen. 60fps-Spinner sind meist nur Kosmetik.

Der Web-Worker-Trick (für Hintergrund-Tabs)

Der Button "Flip im GitHub-Stil" weiter oben ist eine direkte Portierung der charakteristischen Animation aus der Bibliothek Aymkdn/animated-favicon: Symbol A 3 Sekunden halten, die Breite per Cosinus auf null zusammenstauchen, auf Symbol B umschalten, die Breite wieder ausdehnen. Die Mathematik kommt direkt aus favicon_worker.js der Bibliothek: width = canvas.width * Math.abs(Math.cos(progress * Math.PI)), wobei das zweite Bild übernimmt, sobald progress 0,5 überschreitet.

Aymkdns Bibliothek geht noch einen Schritt weiter: Sie führt diese Schleife in einem Web Worker aus. Worker werden nicht gedrosselt, wenn der Tab in den Hintergrund rutscht — die Animation läuft also weiter, und mit OffscreenCanvas kann der Worker Frames erzeugen, ohne das DOM anzufassen.

Das Muster sieht ungefähr so aus:

// In deiner Seite
const worker = new Worker('favicon-worker.js');
worker.onmessage = (e) => {
  if (e.data.type === 'updateFavicon') {
    document.querySelector('link[rel~="icon"]').href = e.data.dataUrl;
  }
};
worker.postMessage({ type: 'init', images: ['icon-a.png', 'icon-b.png'] });

// In favicon-worker.js
const canvas = new OffscreenCanvas(16, 16);
const ctx = canvas.getContext('2d');
// ...einen Frame zeichnen...
const blob = await canvas.convertToBlob();
const reader = new FileReader();
reader.onloadend = () => self.postMessage({ type: 'updateFavicon', dataUrl: reader.result });
reader.readAsDataURL(blob);

Lohnt sich, wenn deine App so etwas wie Chat-Client, Build-Dashboard oder Monitoring-Tool ist — also etwas, das Nutzer im Hintergrund-Tab parken. Sonst ist die Hauptthread-Variante einfacher und tut's auch.

Ein paar Dinge, die man wissen sollte

Nimm 16×16 oder 32×32, nicht größer. Das Favicon wird sowieso winzig dargestellt, ein größerer Canvas bedeutet längere Data-URLs und mehr CPU pro Frame. 32×32 mit knackigen Pixeln ist der Sweet Spot.

Setze das Favicon als PNG, nicht als ICO. canvas.toDataURL('image/png') ist das Einzige, was zuverlässig funktioniert. Versuch nicht, ICO selbst zu kodieren.

Beim Stoppen das Original-Favicon wiederherstellen. Speichere link.href, bevor du animierst, und stelle ihn auf beforeunload oder am Ende des Vorgangs wieder her. Tabs mit halbkaputter Animation nach einer Navigation wirken buggy.

Nicht endlos animieren. Selbst ein dezenter Puls verbraucht auf dem Handy Akku. Stoppe die Animation, wenn der Ladevorgang fertig ist, der Nutzer die Benachrichtigung gelesen hat oder der Tab den Fokus verliert.

Bei einfachen Fällen lass es bleiben. Willst du nur "1 ungelesene Nachricht" zeigen, tausch das Favicon einfach gegen eine statische rote-Punkt-Variante. Keine Animation nötig. Vieles, wofür animierte Favicons herhalten müssen, ist schlicht überzogen.

Wann es sich lohnt

Animierte Favicons passen, wenn:

Die Animation einen echten Zustand widerspiegelt, der dem Nutzer wichtig ist (Upload, Verarbeitung, neue Nachricht)
Die Seite zu der Sorte gehört, die man im Hintergrund-Tab liegen lässt
Ein statisches Badge oder eine reine Tab-Titel-Änderung dieselbe Information nicht transportieren würde

Sie passen nicht, wenn:

Es reine Dekoration ist
Die Animation läuft, solange der Tab geöffnet ist
Deine Hauptzielgruppe Safari oder Mobile nutzt, wo es kaum funktioniert

Nimm die Demo oben, übertrage sie in dein Projekt, tausche Farben und Formen gegen deine Marke und liefere sie aus. Der vollständige Quellcode steckt in dieser Seite — Quelltext anzeigen, kopieren, anpassen.

Quellen

Aymkdn/animated-favicon auf GitHub — Web-Worker-basierte Bibliothek für animierte Favicons, animiert auch in inaktiven Tabs weiter
The Making of an Animated Favicon — CSS-Tricks — Chris Coyiers Erklärung der Canvas-zu-Favicon-Technik
How to animate a favicon? — Stack Overflow — Der klassische Thread mit mehreren Ansätzen und Browser-Hinweisen
OffscreenCanvas — MDN — Die API, die das Web-Worker-Animationsmuster überhaupt möglich macht