Animierte Favicons erstellen

Sie möchten einen Ahh-Effekt auf Ihrer Website? Dann sind animierte Favicons vielleicht eine Antwort.

Animierte Favicons sind Hipp

Favicons sind die kleinen Webseitensymbole (Icons), welche der Webbrowser links neben der Adresszeile und links im Tab (IE 7 oder Firefox) neben dem Seitentitel anzeigt. Wenn auch nicht perfekt - aber die meisten Webbrowser lassen inzwischen auch bewegte bzw. animierte Favicons zu. Schon ein unbewegtes, statisches Favicon verleiht einer Website eine Individualität, ein kurzzeitig animiertes Webseitensymbol verstärkt diesen Eindruck noch erheblich.

Do's ...

Animierte Favicons sollten natürlich nur dort eingesetzt werden, wo es sinnvoll erscheint: Eine Animation der Animation wegen ist sicherlich fehl am Platz. Die Animation sollte nach Möglichkeit auch nur einmal dezent und langsam ablaufen. Aus Erfahrung wirken Favicon-Animationen dann am Besten, wenn diese wenige Sekunden nach Laden der Seite (auf dem Bildschirm ist Ruhe eingekehrt) über ca. drei bis fünf Sekunden animiert werden und danach in der ursprünglichen Erscheinung stehen bleiben.

... and Don'ts

Nichts wäre schlimmer als eine zappelnde, blinkende Reihe von Favicons in der Tab-Leiste des Browsers im Stil amerikanischer Weihnachtsbaumbeleuchtung! Achten Sie daher darauf die Animation nicht fortfährend ablaufen zu lassen. Da einige Browser wie der Microsoft Internet Explorer und Opera keine animierten Favicons unterstützen und nicht immer darauf gebaut werden kann, das diese auf eine parallel hinterlegte statische Variante zurückgreifen, sollte das erste Bild der Animation dem gewünschten "statischen" Favicon entsprechen.

Einbindung von Favicons

Entwicklung eines Icons

Ein animiertes Favicon muss im Unterschied zu Standard-Favicons im GIF-Bildformat und einer Größe von 16x16 Pixel sowie max. 256 Farben (8 Bit Farbtiefe) erstellt werden. Parallel wird dazu ein statisches Favicon im ICO-Bildformat (ebenfalls 16x16 Pixel, 256 Farben) erstellt, welches in den Browsern angezeigt wird, die keine animierten Favicons unterstützen. Animierte GIF-Bilder können entweder direkt in einem Grafik- und Zeichenprogramm oder aus einem Video (bspw. für Logoanimationen) generiert werden (siehe Links).

Favicons auf Webserver ablegen

Im Normalfall wird die Favicon-Bilddatei im MS Windows Symbol Ressource Format (ICO) gespeichert und erhält den Dateinamen "favicon.ico", die animierte Variante wird im GIF-Format und erhält den Dateinamen "favicon_animated.gif". Mit diesem Verfahren wir die höchste Browserkompatibilität sichergestellt obwohl für die statische Favicon-Variante auch andere Bildformate und -dateinamen zulässig sind. Die "favicon.ico" und "favicon_animated.gif" wird im HTML-Dokumenten Hauptverzeichnis des Webservers abgelegt, so dass die Datei unter http://www.meinedomain.de/favicon.ico bzw. http://www.meinedomain.de/favicon_animated.gif referenzierbar ist.

Icon im Quellcode referenzieren

Da dem Webbrowser so aber noch unbekannt ist, das zu einer Webseite ein (animiertes) Favicon existiert, müssen die Favicons im HTML-Dokumentenkopf referenziert werden. Beispiel:

Die Verlinkung des Favicon erfolgt innerhalb des HTML-<head>-Bereiches mit Hilfe des HTML-Befehls <link> als Beziehung zu einer anderen Ressource - hier das Icon. Notwendige Attribute sind:

rel - Typ der Dateibeziehung: "shortcut icon"
href - Verknüpfungsziel, d.h. URL des Icons
type - Dokumententyp (Mime-Type) des Verknüpfungsziels: "image/png", "image/x-icon" oder "image/gif" (für animierte Favicons)

Die Referenzierung des Favicon erfolgt hier doppelt: Einmal die statische Variante und einmal - für die Browser, welche dies unterstützen - die animierte Variante. Normalerwiese sollte bspw. Firefox automatisch die animierte Variante anzeigen. Funktioniert dies nicht, muss die Referenzierung des statischen Favicon entfernt werden und dafür gesorgt werden, das das erste Frame des animierten GIF-Favicon das (bspw. im Internet Explorer anzuzeigende) statische Favicon darstellt.

Wieso Favicons nicht immer funktionieren

Der erste Versuch, ein Favicon in eine Website zu integrieren ist oft von Misserfolg gekrönt. Neben der Tatsache, dass die verschiedenen Browser die Anzeige, das Caching und das Nachladen der Favicons verschieden handhaben, treffen oft folgende Ursachen zu:

mitunter wird ein Favicon erst dann angezeigt, wenn die betreffende Webseite als Favorit gespeichert ist
das "favicon.ico" ist nicht wirklich eine ICO-Datei, sondern wurde einfach nur so benannt
das Favicon ist größer als 16x16 Pixel: Obwohl 32x32 Pixel zulässig sind, besser nur 16x16 Pixel in 8-Bit Farben (256 Farben) verwenden
der Dokumententyp (Mime-Type) wird vergessen anzugeben
der Webserver (z.B. Apache) gibt nicht den korrekten Dokumententyp "image/x-icon" aus: Geben Sie die URL zum Favicon (bspw. http://www.viomatrix.de/favicon.ico) direkt in die Browser-Adresszeile ein - hier muss ein Bild angezeigt werden und kein wirrer Zeichensalat. Ergänzen Sie ansonsten die Apache-Konfiguration mittels .htaccess-Eintrag um die Zeile: AddType image/x-icon .ico
im Internet Explorer 7: eventl. ist die Website noch im Browsercache. Dann auf eine andere Seite wechseln, Extras / Browserverlauf löschen ... / Dateien löschen ... wählen. Danach wird das Favicon neu geladen und wird angezeigt.

Welche Browser unterstützen animierte Favicons

Firefox: wird unterstützt
Safari: teilweise unterstützt
Microsoft Internet Explorer: nicht unterstützt
Opera: nicht unterstützt

Hilfreiche Links

Online Favicon Validator - Nach Eingabe der eigenen Internetadresse, prüft der Validator das verknüpfte Favicon und gibt Hinweise auf mögliche Fehler
How to Add a Favicon to your Site - (englischsprachige) Anleitung des W3C-Konsortiums zum Einbau eines Favicons.
Wikipedia Favicons - allgemeine Informationen zu Favicons in Wikipedia
FavIcon Generator - Online Favicon-Generator (englisch)
GeoVid - Video-Dateien in animierte Gif-Bilder konvertieren
FaviNator - Online Favicon-Generator (deutsch)