Was ist das Favicon?

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:

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?

Was passiert wenn ich kein Favicon habe?

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.

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.