Das Favicon ist ein kleines Icon, das bei Browsern, in der Tab Leiste, direkt neben dem Title der Seite angezeigt wird.
Was ist das Favicon?
Das Favorite Icon ist ein kleines Bild, das in der Adresszeile des Webbrowser links neben dem Title der Seite angezeigt wird.
Es kann als Wiedererkennungsmerkmal einer Webseite dienen und dadurch auch einen Einfluss auf die Benutzerfreundlichkeit einer Webseite ausüben.
Wie baue ich das Favicon ein?
Das Favicon wird über ein Link-Element, im <head>-Bereich des HTML-Dokuments eingebaut. Dazu wird festgelegt:
- dass es sich um ein Icon handelt (
rel=icon), - wo sich das Icon befindet (
href=favicon.png), - die Größe des Icons (
size="16x16") - und um welchen Content-Typ es sich handelt (
type="image/png")
Im Quelltext kann es dann so aussehen:
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#007c8">Bei dem rel="manifest" handelt es sich um einen Eintrag den Chrome auf Android nutzt. Und der Eintrag zu rel="mask-icon" ist extra für den Safari Browser von Apple und legt fest, welches Icon bei angehefteten Tabs angezeigt werden soll.
Alle weiteren Möglichkeiten, wie der Link-Type „icon“ genutzt werden kann, findest Du auf der Webseite des zuständigen Gremiums, dem W3C.
Welche Bildformate und Größen kann ich für das Favicon benutzen?
In unserem obigen Beispiel haben wir 3 Einträge für verschiedene Favicons mit verschiedenen Größen und es lassen sich noch viele weitere definieren.
Auf Stack Overflow gibt es eine ausführliche Antwort auf die Frage welche Größen und Dateiformate genutzt werden sollten: Favicon Standard – 2018 – svg, ico, png and dimensions?
Wenn der entsprechende Browser kein Favicon finden kann zeigt Chrome, zum Beispiel, ein leeres Dokumentenicon an. Firefox und Safari zeigen hingegen gar kein Favorite Icon an:
Es gibt mehrere mögliche Gründe, warum dein Favicon nicht angezeigt wird:
- Der Code für die Implementierung ist fehlerhaft.
- Dein Browser hat deine Seite als eine Seite ohne Favicon gespeichert.
- Der angegebene Pfad ist nicht korrekt.
- Du verwendest einen Browser, der Favicons nur von bestimmten Orten lädt.
- Der Link für das Favicon steht nicht im Header.
Ein Favicon fügst du durch folgenden Link im Header-Bereich der Seite hinzu:
<link rel="shortcut icon" href="Pfad zum Favicon.ico">
Damit Google dein Favicon findet und anzeigt, musst du die Richtlinien dafür befolgen. Bitte Google bei Änderungen einer URL, deine Seite neu zu indizieren. Dies kann einige Tage oder Wochen dauern. Achte auch darauf, das richtige Format für dein Favicon zu verwenden (ein Vielfaches von 48 Pixeln).
Konsistente Verlinkungen von allen Seiten sind die Voraussetzung dafür, dass Google das richtige Favicon in den Suchergebnissen anzeigt. Johannes Müller von Google wies in einem Webmaster Hangout darauf hin, dass das Favicon auf jeder Unterseite verlinkt sein muss. Entscheidend dabei ist die Konsistenz, nicht die Art der Verlinkung. Sonst besteht die Gefahr, dass das Favicon nicht angezeigt wird.
Fazit zum Favorite Icon
Das Favorite Icon bietet eine gute Möglichkeit das eigene Logo auch im Browser sichtbar zu machen. Es daher ratsam das eigene Logo als Favicon zur Verfügung zu stellen.
Es gibt im Netz auch kostenfreie Anbieter, wie den Real Favicon Generator, mit denen sich alle relevanten Größen (und viele weitere) mit relativ wenig Aufwand erstellen lassen.
