Skip to main content

Favicon

Was ist ein Favicon?

Favicons sind kleine quadratische Bilder, gewöhnlich mit einer Größe von 16 × 16 Pixel, die von Browsern verwendet werden, um ein grafisches Symbol der besuchten Webseite auf der linken Seite der Adressleiste des Browsers anzuzeigen. Favicon ist ein Kunstwort, das aus den Wörtern “Favorite” und “Icon” gebildet wird. Übersetzt heißt Favicon “Favoritensymbol” oder wörtlich “favorisiertes Symbol”. Andere Bezeichnungen sind shortcut icon, website icon, tab icon, URL icon oder bookmark icon.
Beispiel von einem Favicon

Tipp

Das Favicon sowohl in der Usability-Optimierung als auch im SEO ein wichtiger Bestandteil. Favicons sind ein Instrument des Marketings, mit denen der Wiederkennungswert einer Webseite und die Bekanntheit einer Marke gesteigert werden können. Ein Favicon dient dazu, eine Webseite aus der Masse hervorzuheben. Um diese Aufgabe optimal erfüllen zu können, sollte das Favicon bezüglich der verwendeten Farben und Gestaltung zum Logo des Unternehmens und zur Webseite passen.

Die Geschichte des Favicon

Favicons wurden erstmals im Internet Explorer 5 aus dem Jahr 1999 unterstützt. Ursprünglich war das Favicon eine Datei namens favicon.ico, die im Stammverzeichnis einer Website gespeichert wurde. Es wurde in den Lesezeichen des Internet Explorer und neben der URL in der Adressleiste verwendet, wenn die Seite mit einem Lesezeichen versehen wurde. Daher rührt auch der Name der Icons, denn die Lesezeichen-Funktion des Internet Explorer 5 wurde als Favoriten bezeichnet.

Funktionswandel des Favicon von Desktop zum Smartphone

Mit der im Dezember 1999 veröffentlichten Version HTML 4.01 und im Januar 2000 mit XHTML 1.0 wurden Favicons vom World Wide Web Consortium (W3C) erstmals standardisiert. Die Standardimplementierung verwendet ein Link-Element mit einem rel-Attribut im head-Bereich der Website, mit dem das Dateiformat sowie der Dateiname und der Speicherort des Favicons angegeben wird. Anders als bis dato erforderlich kann sich die Favicon.ico Datei jetzt in einem beliebigen Verzeichnis der Webseite befinden und verschiedene Bilddateiformate haben.

Internet Explorer in den Versionen 5 bis 10 unterstützen nur das ICO-Dateiformat. Die alten Versionen 5 und 6 des Internet Explorer zeigen Favicons nur dann an, wenn die Seite mit einem Lesezeichen versehen ist. Moderne Browser wie Firefox, Chrome, Window Explorer 11 und Edge unterstützen Favicons in den Formaten: PNG (alle), GIF (auch animiert), JPEG und SVG (jeweils teilweise) und weiteren Dateiformaten. Bei Webbrowsern können Favicon-Formate von 16 x 16, 32 x 32, 48 x 48 oder 64 x 64 Pixel verwendet werden, die auf 16 x 16 Pixel herunterskaliert werden. Die Farbtiefe kann 8 Bit, 24 Bit oder 32 Bit betragen.

Für mobile Endgeräte mit immer höher auflösenden Bildschirmen werden größere Favicons benötigt, die auf der Startseite dargestellt und als Schaltfläche benutzt werden können. Die sogenannten apple-touch-icons haben eine Größe von bis zu 180 x 180 Pixel und für den mobilen Chrome Browser eine Größe von 196 x 196 Pixel. Die Icons können als PNG Datei in einem beliebigen Verzeichnis gespeichert werden.

Die Funktion eines Favicons

In den frühen Tagen des Internets, als Werkzeuge wie Google Analytics noch nicht existierten, waren Favicons eine Möglichkeit, den Traffic einer Webseite grob zu bestimmen, in dem Anzahl der Besucher, die eine Webseite mit einem Lesezeichen versehen haben, gezählt wurden. Diese Besucherzählung funktioniert heute nicht mehr, da alle modernen Browser die Favicon-Datei laden, um sie in ihrer Webadressleiste anzuzeigen, unabhängig davon, ob auf der Seite ein Lesezeichen gesetzt ist oder nicht.

Heute ist eine der Hauptaufgaben der Favicons, die Benutzererfahrung und Benutzerfreundlichkeit einer Webseite zu verbessern. Favicons werden in allen modernen Browsern in der Adressleiste, in der Linkleiste, im Lesezeichenbereich und in den Browser-Tabs verwendet. Außerdem zeigen einige Browser Favicons an, wenn Webseiten Besucher einen Link für die entsprechende Website auf Ihrem Desktop und Ihrem Smartphone oder Tablet erstellen. Bei einer Webseite, die kein eigenes Favicon bereithält, wird ein generisches Browsersymbol auf allen oben genannten Interaktionspunkten angezeigt. Beim Chrome Browser ist dieses Symbol das mehrfarbige “G” für Google.

Sie möchten mehr über die Funktionsweise von Webseiten erfahren? Hier geht es zu unseren Beiträgen über HTML5 und hreflang.

 

Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG