Animierte Favicons (GIF und JavaScript)
Ein animiertes Favicon ist meist ein animiertes GIF, das als Icon verwendet wird; Firefox und einige Chromium-Builds spielen es im Tab ab, während Safari und andere nur das erste Frame zeigen. Websites nutzen Animation vor allem, um Live-Aktivität zu signalisieren (ein Spinner, ein Ungelesen-Zähler, ein Aufnahmepunkt), oft indem sie das Icon per JavaScript tauschen, statt sich auf ein GIF zu verlassen. Für eine Bildmarke ist ein statisches Icon klarer und breiter unterstützt.
Die Unterstützung ist uneinheitlich, also behandle es als Erweiterung
Ein animiertes GIF, das als Favicon referenziert wird, spielt in Firefox und einigen Chromium-Builds ab, aber Safari und mehrere andere rendern nur das erste Frame. Animation darf also nie tragend sein: Was das Icon aussagen muss, muss allein in diesem ersten Frame lesbar sein.
Deshalb sind die meisten „animierten“ Favicons in freier Wildbahn gar keine GIFs. Es ist ein Skript, das das Icon aus einem Canvas neu zeichnet und das href des Link-Tags tauscht: ein Spinner, während etwas lädt, ein roter Punkt beim Aufnehmen oder ein Ungelesen-Zähler über der Bildmarke. Das gibt präzise Kontrolle und funktioniert über denselben Link-Tausch-Mechanismus überall.
Der JavaScript-Weg für Live-Status
Um ein Ungelesen-Badge oder einen Status-Punkt zu zeigen, zeichne jeden Zustand auf ein Canvas, exportiere ihn und setze das href des Favicon-Links auf das Ergebnis. Der Browser aktualisiert das Tab-Icon im laufenden Betrieb. So setzen Mail- und Chat-Apps eine Zahl in den Tab, und es degradiert elegant zu einem statischen Icon, wo Scripting deaktiviert ist.
FAQ zum animierten Favicon
Funktionieren animierte Favicons in Chrome und Safari?
Die Unterstützung ist inkonsistent. Firefox animiert GIF-Favicons, Chromium war mal so, mal so, und Safari zeigt typischerweise nur das erste Frame. Verlass dich nie darauf, dass die Animation gesehen wird.
Wie zeige ich einen Ungelesen-Zähler im Favicon?
Zeichne das Icon plus das Badge in JavaScript auf ein Canvas und setze dann das href des Favicon-Links auf die Canvas-Ausgabe. Aktualisiere es, wann immer sich der Zähler ändert. Es ist dieselbe Technik, die Mail- und Chat-Apps nutzen.
Sollte ich ein animiertes Favicon verwenden?
Für eine Bildmarke nein. Ein statisches Icon ist klarer und universell unterstützt. Reserviere Animation für echten Live-Status und setze den mit einem JavaScript-Link-Tausch statt eines GIFs um.