9. Mai 2011

Warum das Favicon so wichtig ist

Geschrieben von Petra Hamacher . Eingeordnet unter Shop Optimierung | 1 Kommentar

Das Favicon – eine große Unbekannte, der nur wenige Beachtung schenken. Doch wir finden: Zu Unrecht!

Favicons im Firefox4

Favicons im Firefox4: In der Taskleiste und in der URL-Zeile

Warum und wieso listen wir hier im Blogbeitrag einmal auf. Wer natürlich noch weitere Argumente hat, nur her damit!

Ein Online Shop sollte rund herum stimmig sein! Diese Aussage ist zwar allgemein, aber immerhin enthält sie viele Wahrheiten. Doch was heißt “stimmig”? Beispielsweise legen große Unternehmen viel Wert darauf, dass eine gewisse Einheit im Unternehmen und in der Unternehmenskommunikation herrscht. Volksmundig wird dies “Corperate Identity” genannt. Der Kunde soll, egal wo er mit dem Unternehmen in Berührung kommt, eine Wiedererkennungswert haben. Dazu gehört auch das Firmen Logo, vermutlich das bekannteste Stilmittel. Eine der weniger bekannten Möglichkeiten ist das sogenannte Favicon (Favoriten Symbol). Häufig ist es ein Ausschnitt (16 x 16 Pixel und 8-bit) aus dem Logo oder, sofern es natürlich passt, das Logo selbst.

Dieses Icon findet man

  • in seinem Browser oben im Tab (Taskleiste)
  • URL-Zeile vor der eigentlichen Adresse
  • In der Lesezeichenliste / Favoritenleiste
  • Auf dem Desktop wenn dort eine Webseite abgelegt wird
  • In der Windows-Startleiste, wenn man hier Webseiten ablegt
  • Und für die Kenner unter uns: Ein Seitenzugriff erzeugt einen Eintrag in der Logdatei des Webservers. Fehlt das Icon wurde im Internet Explorer 5 beispielsweise ein Fehler eingetragen. Nicht gut, vor allem wenn die Seitenzugriffen recht hoch sind, kommen hier viele Einträge zustande

Warum ist dieses Icon aber so wichtig?

  1. Der User erkennt in seiner Taskleiste sofort: Hier handelt es sich um den Tab mit Facebook, da das weißte “f” auf blauem Hingergrund deutlich zu sehen ist.
  2. Mein momentaner Hauptgrund: Die neue Firefox Version 4 erlaubt es, Tabs als sogenanntes App-Tab festzupinnen. Dies bedeutet, wie im Beispielbild (s.o.) zu sehen ist, dass die Tabs nicht mehr den Titel anzeigen, sondern lediglich das Favicon. Dies dient der weiteren Übersicht. Gerade beruflich hat man manchmal eine Reihe an Tabs auf. Die oft gebrauchten erkennt man schon am Favicon, da ist der Titel nebensache. Daher hat man sich bei der aktuellen Firefox Version diese Möglichkeit ausgedacht. Eine schöne Idee, wie ich finde. Aber nur, wenn das Favicon auch vorhanden ist. Hier in unserem Beispiel im Firefox Version 4 sieht man oben die App-Tabs und die Adress-Zeile mit dem Favicon von Shop-Optimieren (grünes “n”) recht gut. Wie man bei dem letzten Tab erkennt, ist hier nur ein weißes Blatt – welche Seite mag dies nur sein?
  3. Über all dort, wo ich eine Webseite abspeichere, erscheint das Favicon. Viele werden sich an das Internet Explorer “e” erinnern, welches man in der Windows Startleiste hatte.
  4. Social Media Plattformen wie Twitter und Facebook oder Bookmarkdienste wie Mr. Wong oder digg benutzen das Favicon auch als Button an. Wie hier im Beitrag zu sehen, kann man auf das gleiche Icon drücken und teilt den Beitrag dann anschließend bei Twitter. Der Wiedererkennungswert ist enorm!
  5. Blog-Sammeldienste wie netvibes.de bedient sich auch der Favicons, damit die Beiträge in der Sammelliste noch den einzelnen Blogs zugewiesen werden können.

Was sollte ich bei der Verwendung des Favicons beachten?

Eine Auswahl an schönen Favicons findet man bei DrWeb.de. Es lohnt sich vorab mal nach solchen Incons zu recherchieren. Nicht immer darf man jedes Icon rechtlich einfach so verwenden!

Hier sieht man übrigens auch sehr schön, dass die Favicons auch immer einen Mouseover Text haben! So erkennt man direkt, zu wem das Favicon gehört. Wie bei jeder guten Suchmaschinenoptimierung für Bilder, sollte also auch hier ein Alt-Tag, ein passender Titel sowie Dateiname eingegeben werden.

Als Endung sollte .ico verwendet werden. Dies ist ein festgelegtes Dateiformat, die sicher stellt, dass alle Browser das Icon auch erkennen. Ein .png Format ginge auch, aber der Internet Explorer verlangt meines Wissens bis Version 8 ein .ico. Es hilft dann nicht, andere Dateiformate einfach umzubenennen. Generatoren uns Anbieter, die aus Bildern und Logos ein Favicon mit entsprechender Endung generieren, gibt es zur genüge. Ob die Qualität immer so gut ist, sei dahingestellt. Ein Bild einfach runter zu rechnen reicht ebenfalls nicht aus, um einen professionellen Eindruck zu hinterlassen.

Ein auftretender Trend bei Favicons ist die Animation. Dabei bewegt sich das Favicon in irgendeiner Weise: Kleine Männchen hüpfen oder Buchstaben drehen sich um sich selbst. Natürlich kann man durch ein animiertes Favicon noch mehr auf sich aufmerksam machen. Allerdings sei hier auch gesagt, dass der Internet Explorer und Opera nicht immer alles billigen und ich schon Animationen gesehen habe, die unter diesen Browsern nicht funktionierten. Und das blinkende, bunte, schnelle und recht aufdringliche Animationen eher abschrecken als anlocken, muss vielleicht nicht unbedingt erwähnt werden, oder?

Hat man sich für ein Favicon entschieden, geht es ans einfügen: Die meisten Shopsysteme haben ein spezielles Eingabefeld, wo das Favicon hinterlegt werden sollte. Wer eine Webseite betreibt und sich den Einbau zutraut, dem sei hier noch die englische Anleitung mit an die Hand gegeben, so dass W3C-technisch keine Probleme entstehen.

Fazit zum Thema Favicon

Das Favicon taucht an mehr Stellen auf, als wir es so vermuten. Es sollte daher möglichst an das Unternehmen, an den Online Shop angelehnt sein. Gerade bei solchen Neuerungen wie bei der Morzilla Firefox 4 Version mit der Möglichkeit zum App-Tab. Hier geschieht die Navigation nur noch über das Favicon. Ein Grund mehr sich 30 Minuten für die Erstellung und den Einbau zu nehmen, um seinen Kunden die beste Usability auch an dieser Stelle zu gewährleisten!

1 Kommentar zu “Warum das Favicon so wichtig ist”

  1. Schaut mal nach oben | utestattplastik on Donnerstag, 12. Mai 2011 um 08:33 Uhr

    [...] Hier wird übrigens beschrieben, warum man ein Favicon haben sollte. [...]

Hinterlasse einen Kommentar