hanseranking GmbH
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Ein Favicon war früher auf eine Größe von 16×16 bis maximal 32×32 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 | 16×16, 32×32 Pixel | favicon.ico sollte immer vorhanden sein! |
| Moderne Browser | 32×32, 96×96 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 | 36×36, 48×48, 72×72, 96×96, 144×144, 192×192 Pixel | favicon.ico, favicon.png, favicon.svg |
| Apple | 57×57, 60×60, 72×72, 114×114, 76×76, 120×120, 152×152, 180×180 Pixel | favicon.ico, favicon.png, apple-Touch Icon.png, favicon.svg |
| Microsoft-Desktop | 70×70, 150×150, 310×310 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.
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 512×512 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.
