Favicon in der SEO: einfach unverzichtbar

Favicons siehst Du, sobald Du eine Website oder einen Online Shop aufgerufen hast. Die kleinen Icons neben dem Seitentitel im Browser-Tab oder in Deinen Lesezeichen. Hat jemand kein Favicon, nimmt den Platz das vorgefertigte Favicon ein, dass in der Regel vom Browser oder dem genutzten Content-Management-System stammt. Nichts sieht mehr nach Amateur aus als eine Website mit einem Browser- oder Wordpress-Favicon, oder? Das finden die Besucher Deiner Seite auch. In diesem Beitrag verraten wir Dir, warum ein Favicon für SEO wichtig ist, was ein Touch Icon ist und wie Du Dir welche erstellst und einbindest.

Was ist ein Favicon?

Ein Favicon (Kofferwort aus „Favorite“ und „Icon“) ist Dein maximal vereinfachtes Logo, das zum eindeutigen Identifizieren einer Webseite oder eines Online Shops dient. Es wird in Tabs, mobilen Suchen, dem Suchverlauf und bei einigen Suchmaschinen in den Suchergebnissen angezeigt.

Was ein Touch Icon?

Ein Touch Icon ist ein größeres Favicon, dass als App-Kachel optimiert wurde und auf Tablets und Smartphones als antippbares Icon auf dem Start- bzw. Home-Bildschirm angezeigt wird. Auch im Startmenü und in der Symbolleiste von Desktop-Computern wird das Icon als Lesezeichen genutzt.

SEO: So hilft das Favicon beim Ranking

Auch wenn das Einbinden eines Favicons nicht direkt als solches zu einem besseren Ranking bei Google oder anderen Suchmaschinen führt, trägt es dennoch zu einer verbesserten Position in den Suchergebnissen bei. 

Favicons verbessern das Ranking indirekt durch:

• eine verbesserte Userexperience und Nutzerfreundlichkeit.
• mehr Traffic durch das Wiedererkennen und Wiederfinden der Seite oder App.
• gesteigerte Markenbekanntheit und Identifikation mit dem Logo.

Favicons steigern Sichtbarkeit und Wiedererkennungswert

Der graue Globus oder das blaue Wordpressicon sind Favicons, die jede Lesezeichensammlung schmücken. Langweilig und austauschbar stehen Sie vor allen Websites, die sich nicht die Mühe gemacht haben, ein eigenes Favicon zu erstellen. Keine dieser Seiten ist einprägsam oder fällt auf den ersten Blick auf und suggerieren nicht gerade die maximale Userexperience. Professionelle Seiten haben Favicons, deren Markenbekanntheit dadurch maximal gefördert werden. Das Google-G-Favicon zeigt Dir sofort, dass Du in diesem Tab eine Googlesuche geöffnet hast. Das Duden-D, dass Du in diesem Tab ein Wort nachgeschlagen hast und Hanseranking-Logo als Favicon, dass hier der spannende Blog zu finden ist, den Du gerade liest.

Favicons als Übersicht im Browser Tab und -Verlauf

Bei mehr als zehn Tabs sind nur die ersten Buchstaben der Seitentitel sichtbar. Das Favicon ist ein bequemer Weg, Deine Seite unter all den Tabs durch ihre Unverwechselbarkeit zu identifizieren. Der Wiedererkennungswert, den ein Favicon mit sich bringt, ist eben unbezahlbar. Auch bei einem Blick in den Browser Verlauf wird Deine Seite mit einem Favicon schnell wiedergefunden.

Lesezeichenleiste und die Favicons

Nutzer bookmarken Websites und Shops, die sie mögen und speichern Sie als Favoriten in ihren Lesezeichen ab. Je voller die Lesezeichenleiste oder Lesezeichenliste, desto unübersichtlicher ist es für den Nutzer. Das Favicon lässt ihn gleich erkennen, dass es sich um Deine Website oder Deinen Webshop handelt, auch wenn der Lesezeichenname in der Leiste angeschnitten ist. 

Favicons erscheinen in den mobilen SERPs bei Google und als App-Symbol

In der Desktop-Suche von Google werden die Favicons zwar nicht mehr angezeigt, in der mobilen Suche aber schon. Das gibt Dir die Möglichkeit, Deinem Suchergebnis ohne Kosten eine Portion Extraaufmerksamkeit zu verpassen, die Du in jedem Fall nutzen solltest. Besonders auf mobilen Endgeräten wie Smartphones und Tablets kannst Du mit einem Favicon für größtmögliche Aufmerksamkeit und Wiedererkennung sorgen. Jeder findet auf Anhieb eBay oder Amazon durch die markanten Favicons. Der User soll schließlich auf einen Blick die App entdecken und nicht erst suchen müssen.

Favicon und Touch Icon erstellen

Je nachdem, wo das Favicon oder Touch Icon angezeigt werden soll, braucht es unterschiedliche Formate und auch beim Design des kleinen quadratischen Bildes gibt es einiges zu beachten.

Favicon Design: klar und simplifiziert

Ein gutes Favicon bringt die Essenz Deiner Marke oder Deiner Website auf den Punkt. Ein hervorragendes Beispiel ist das schwarze Amazon „a“ mit dem typischen gelben Pfeil als Favicon und Touch Icon.  Wähle möglichst auffällige Farben und mach das Design so einfach wie es geht, damit es als winziges quadratisches Bild erkennbar bleibt. Besteht Dein Logo beispielsweise aus einem Namen, ist der erste Buchstabe in einer Farbe und einem einfarbigen Hintergrund die das in Deinem Logo oder auf Deiner Website dominierenden Farbbild aufgreift super. Wir bei Hanseranking nutzen unser Signet als Favicon. Wichtig ist, dass auf einen Blick klar ist, dass dieser Tab zu Deiner Website/Marke gehört.

Favicon-Dateien – welche Größen und Bilddateitypen sollten es sein?

Ein Favicon war früher auf eine Größe von 16x16 bis maximal 32x32 Pixel beschränkt. Es war damals ausschließlich in Form einer favicon.ico-Datei anzulegen, die im Root-Verzeichnis der Website abgelegt wurde. Die dort von dem Browser selbstständig gesucht und genutzt wurde. Das geht alles noch immer. Hinzugekommen sind aber die Anforderungen, die eine Darstellung auf mobilen Endgeräten als Touch Icon darstellt. Auch ein Desktopsymbol braucht eine größere Auflösung. Favicons und Touch Icons werden heute in verschiedenen Größen und Formaten benötigt, um überall die optimale Darstellung zu erhalten. 

Plattformen	Größen	Formate
Ältere Browser	16x16, 32x32 Pixel	favicon.ico sollte immer vorhanden sein!
Moderne Browser	32x32, 96x96 Pixel	favicon.ico, favicon.png oder favicon.svg. SVG ist nicht überall möglich, aber als Vektorgrafik bei gestochener Schärfe skalierbar. Hier sollte es auch immer ein „Ausweich-PNG“ geben. Es gibt auch favicon.gif und favicon.jpg, aber gifs wirken irritierend und jpgs verlieren bei der Komprimierung an Qualität
Android	36x36, 48x48, 72x72, 96x96, 144x144, 192x192 Pixel	favicon.ico, favicon.png, favicon.svg
Apple	57x57, 60x60, 72x72, 114x114, 76x76, 120x120, 152x152, 180x180 Pixel	favicon.ico, favicon.png, apple-Touch Icon.png, favicon.svg
Microsoft-Desktop	70x70, 150x150, 310x310 Pixel	favicon.ico, favicon.png, favicon.svg (empfohlen)

Hinweis: Bei WordPress heißen Favicons übrigens Website-Icons und können über den Customizer im Design verändert werden. 

Fazit: Favicons kleine Bilder – großer Impakt

Favicon sind ein kleines, aber mächtiges und kostenloses SEO-Tool, um Deine Sichtbarkeit, die Userexperience und Deine Bekanntheit zu steigern und damit indirekt auch Dein Ranking. Es sollte auffällig und simpel gestaltet sein und einen hohen Wiedererkennungswert besitzen. Erstelle Dein Favicon in der maximalen Größe von 512x512 Pixel für Touch Icons als SVG und konvertiere sie anschließend in Nicht-Vektor-Grafiken wie PNG oder ICO. Hierfür gibt es sehr gute kostenlose Tools wie beispielsweise den RealFaviconGenerator. Das Tool generiert Dir dann daraus alle benötigten Größen und Dateiformate. Nachdem Du sie korrekt abgelegt hast, können sich alle Browser, Plattformen und Anwendungen das passende Format in optimaler Größe heraussuchen.

Wir freuen uns auf Deinen Kontakt und stehen für weitere Fragen jederzeit zur Verfügung!

Jetzt Kontakt aufnehmen