Favicons erstellen und nutzen

Viele Anwendungsprogramme erkennt man anhand eines typischen Icons. Das ist auch mit Webseiten möglich, die ein sg. "Favicon" (Kombination aus Favoriten und Icon) einbauen.

[Letzte Aktualisierung: 27.04.2012]

Favicons sind echte "Hingucker"

Die meisten Webbrowser zeigen links neben der Internetadresse ein kleines weißes Seitensymbol an. Dieses Seitensymbol kann vom Webmaster einer Website individuell gestaltet werden. Websitebesucher können damit Webseiten besser wiedererkennen, einem Unternehmen oder Produkt zuordnen und die Betreiber steigern damit natürlich die Attraktivität einer Website. Zusätzlich zum Symbol in der Internetadresszeile erscheint dieses Symbol in den Lesezeichen bzw. Favoriten. Damit sticht die betreffende Website gegenüber allen anderen "grauen" Websites schon rein visuell hervor - ein passender, prägnanter Seitentitel tut sein übriges.

Einbindung von Favicons

Entwicklung eines Icons

Das Webseitensymbol ist technisch ein Icon, wie es vom MS Windows Desktop bekannt ist. Im Unterschied zu den Desktopicons sollte das Favoriten Icon (Favicon) allerdings lediglich eine Größe von 16x16 Pixel und max. 256 Farben (8 Bit Farbtiefe) besitzen. Zwar sind auch 32x32 Pixel Icon in 24 Bit Farbtiefe zulässig, werden dann aber oft unzureichend verkleinert. Zulässige Bildformate (Dokumentenformate für die Bilddatei) sind:

PNG (W3C Standard)
GIF
ICO (MS Windows Symbol Ressource)

Bitte beachten: Eine JPEG-Bilddatei mit Hilfe des Windows Dateiexplorer die Dateiendung ".ico" zu geben, macht aus einem JPEG-Bild noch keine ICO-Datei! Dazu muss ein Grafikprogramm oder ein Online Favicon-Generator genutzt werden.

Unabhängig davon sollte das Bild aussagekräftig sein und einen hohen Wiedererkennungswert besitzen. So gleicht das viomatrix.de-Favicon dem Desktop-Symbol der VIO.Matrix Content Manager Anwendung.

Icon auf Webserver ablegen

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

Favicon dynamisch mit Content Management einbinden

Theoretisch kann jede einzelne Webseite ein eigenes Favicon erhalten. Mit dem VIO.Matrix Content Managementsystem wird dazu einfach wie folgt vorgegangen:

Im VIO.Matrix Administrator werden die Ordner- und Elementeformular so angepasst, dass über ein Dateiauswahlfeld mit hinterlegter Bildbearbeitungskomponente (imageedit.dll) jedem Ordner und Element eine Bilddatei (bspw. im PNG-Format) zugewiesen werden kann. Diese Bilddatei ist das Favicon.
Im VIO.Matrix Content Manager wir die Bildbearbeitungskomponente so konfiguriert, dass diese immer 16x16 Pixel-formatige PNGs generiert
Zu jedem Ordner und Element kann nun ein eigenes Favicon zugewiesen werden

Icon im Quellcode referenzieren

Da dem Webbrowser so aber noch unbekannt ist, das zu einer Webseite ein Favicon existiert, muss das Favicon im HTML-Dokumentenkopf referenziert werden:Beispiel:

oder dynamisch

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"

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 ... / Alle löschen ... / inkl. AddOn-Daten wählen. Danach wird das Favicon neu geladen und wird angezeigt.
Mozilla Firefox wird ab Version 13 für über HTTP übertragene Webseite keine Favicons mehr anzeigen. Favicons werden dann nur noch angezeigt, wenn die Seite über HTTPS, also mit einer SSL-Verschlüsselung, übertragen werden. Google Chrome handhabt dies bereits seit längerem so. Hintergrund ist, dass einige Webseiten-Betreiber Favicons in Schloss-Form erstellt haben und so dem Nutzer absichtlich hinsichtlich einer nicht existierenden SSL-gesicherten Verbindung täuschten.

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
Animierte Favicons - viomatrix.de Fachbeitrag
FaviNator - Online Favicon-Generator (deutsch)