Animierte Favicons
Echter Hingucker oder doch zu verspielt: Bewegte Icons als Eye-Catcher auf Ihrer Website
Sich bewegende oder blinkende Grafiken und Icons stammen ja eigentlich noch aus dem vorigen Jahrhundert. Um aus dem Alltagsdesign etwas hervorzustechen, verwenden einige Websites plötzlich wieder blinkende Elemente, um Aufmerksamkeit zu erregen. Warum dann nicht auch die Favicons zum Leben erwecken?
Favicons und die Browserfrage
Vor diesem netten Effekt, steht wieder einmal die Frage zur Browserkompatibilität. Animierte Favicons werden nur im Firefox korrekt dargestellt. Safari soll es angeblich auch beherrschen - das kann ich aber nicht bestätigen: In meinem Safari bewegt sich leider nichts. Der Internet Explorer und Opera weigern sich sowieso strikt diesen Effekt darzustellen.
Icons erstellen
Das neue Favicon muss, da es sich hier um ein animiertes-Gif handelt, auch die Endung .gif haben. Zusätzlich erzeugen Sie sicherheitshalber noch ein statisches Icon mit der Endung .ico, um auch nicht kompatiblen Browsern die Möglichkeit zu geben etwas darzustellen.
Hinweis: Wenn Sie .ico-Dateien erstellen, benennen Sie die Grafik nicht einfach um, sondern konvertieren Sie diese korrekt ins ICO-Format. Das geht einfach z.B. mit IrfanView.
Erstellen Sie mit einem GIF-Animationsprogramm Ihr neues Favicon in der Auflösung 16x16 Pixel mit 8-Bit Farbtiefe und speichern Sie dieses auf Ihren Server.
Gif-Erstellung mit einem rudimentären Editor. Jedes Bild muss extra bearbeitet werden, was je nach Länge der Animation schon mal mit einem unnötigen Zeitaufwand bestraft wird.
Nachdem das Hantieren mit einem GIF-Animator etwas langwierig und umständlich sein kann, gibt es auch einen tollen 
Online-Service für animierte Favicons. Hier haben Sie auch die Möglichkeit scrollenden Text zu erzeugen, um neben Ihrem Firmenlogo auch noch einen kurzen Text anzuzeigen, z.B. Ihren Firmennamen.
Im Headbereich Ihrer Website ergänzen Sie folgende Zeilen für das neue animierte Gif. Um auch anderen Browsern neben Firefox die Möglichkeit zu geben, ein Favicon darzustellen, ergänzen Sie auch die Zeile für die .ico-Datei (falls noch keine vorhanden sein sollte):
# zwischen <head>... </head> einfügen: <link rel="shortcut icon" href="statisch.ico" type="image/x-icon" /> <link rel="shortcut icon" href="animiert.gif" type="image/gif" />
Eine Frage des Geschmacks
Der Einsatz von animierten Favicons ist natürlich reine Geschmackssache. Wie immer gilt hier, ausprobieren und sehen, ob es Ihnen selbst nach einiger Zeit zu nervig erscheint. Eine Möglichkeit ist auch keine sich ständig wiederholende Animation zu erstellen, sondern den Film einmal durchlaufen zu lassen und dann auf Ihrem statischen Icon zu beenden.
Erschienen am 25.11.2008, um 12:44h.