Favicon – Webseite mit Wiedererkennungswert

Ganz klar, der Wiedererkennungswert einer Webseite macht den kleinen aber feinen Unterschied zwischen gut und noch besser. Dieser Icon symbolisiert den Unterschied zwischen Spreu und Weizen und hebt somit eine Webseite aus der grossen Masse ab. Alle ausgezeichneten Webseiten verfügen bereits über einen solchen Favicon, was bedeutet, die entsprechende Webseite wurde professionell erstellt und ist absolut seriös. Wo dieses Favicon angezeigt wird im Browser kann aber unterschiedlich sein.

• Als Lesezeichen
• Oder auch in der Titelleiste
• Und auch in der Adresszeile

 

Ein Favicon kann in die Webseite eingebunden werden

Ruft nun der User eine Webseite auf, sucht der Browser zunächst nach Webseiten mit einem Favicon. So kann es durchaus erfolgversprechend sein, einen Favicon auf die eigene Webseite einzubinden.

• Es wird erst der HEAD-Bereich einer Seite nach einem Favicon durchsucht und der Browser bleibt stehen wo er fündig wird.
• Im Basisverzeichnis von der Internetseite wird nach favicon.ico gesucht.

 

Das Stammverzeichnis eignet sich besonders für ein Favicon

Die einfachste Lösung ist, die Favicon Datei im Stammverzeichnis einer Domain abzulegen. So erscheint dann dieses Symbol auf allen Unterseiten die abgerufen werden. Grundsätzlich kann Favicon auch als GIF oder auch als PNG Datei abgespeichert werden. Dies hat aber den Nachteil, es muss im ICO-Format abgespeichert werden, da der Browser das Stammverzeichnis nur nach dieser Dateiendung durchsucht. Die Umsetzung gestaltet sich recht einfach aber ist nicht unbedingt empfehlenswert, denn diese Lösung ist nicht W3C kompatibel.

 

Der Favicon kann auch im Header sein

Soll ein Favicon W3C konform sein, muss ein Meta-Tag im Header-Bereich eingefügt sein, zusätzlich ist bei der Verwendung von XHTML am Schluss auch noch ein Schrägstrich anzubringen, damit der Befehl abgeschlossen wird. Das href-Attribut muss zwangsläufig angegeben werden. Es ist möglich im Dateipfad auf das absolute oder auch relative Stammverzeichnis hinzuweisen, dazu muss die komplette URL angegeben werden. Es kann sein, dass ein Webhoster solche ICO-Dateien nicht unterstützt, was aber umgangen werden kann indem eine absolute Pfadeingabe auf einen alternativen Speicherplatz verweist, wo das Favicon im Web hinterlegt ist.

Für die richtige Darstellung im Explorer ist die Befehlszeile leicht zu verändern, das type-Attribut braucht es nicht. Diese Angabe ist wichtig, wenn das Favicon als GIF oder auch als PNG Datei hinterlegt wird. Für die verschiedenen Formate müssen auch verschiedene Werte dahinter gesetzt werden, aber immer mit Anführungszeichen.

• image/vnd.microsoft.icon (für favicon.ico)
• image/gif (für favicon.gif)
• image/png (für favicon.png)

So sind bei den unterschiedlichen Formaten ebenfalls unterschiedliche Vorgaben zu beachten, die Pixelzahl wie auch die Anzahl der Farben variiert. Bei einem Favicon das im Format GIF oder PNG hinterlegt wird ist die Größe 16 x 16 wobei die Farbtiefe maximal 256 betragen darf. Im ICO Format sind 16 .x 16 Pixel oder doppelt so groß 32 x 32 Pixel, erlaubt sind 16 bis maximal 16.7 Mio. Farben.

Das Auswechseln von einem Symbol gestaltet sich unter Umständen nicht so ganz einfach. Um die Änderung überprüfen zu können muss erst das Cache geleert werden. So kann es bei WordPress sogar vorkommen, dass sich der Admin aus dem Backend erst einmal abmelden muss. Funktioniert der Favicon immer noch nicht, besteht die Möglichkeit im privaten Bereich des Browsers den Modus umzustellen. Sind alle Einstellungen richtig müsste das Favicon nun zu sehen sein.