Warum deine Website ein Favicon braucht, egal was Google macht
Darum geht’s
Favicon? Noch nie gehört? Das sind die kleinen Grafiken, die in deinem Browser-Tab links neben dem Seitentitel angezeigt werden. Und die sind dort sehr praktisch, denn selbst mit tausend geöffneten Tabs kannst du mithilfe von Favicons auf den ersten Blick erkennen, was sich hinter welchem Browser-Tab verbirgt, selbst wenn der Titel nicht mehr hinpasst.
Wer steckt dahinter?
Findest du es raus? Hinter diesen Tabs verstecken sich: Facebook, LinkedIn, Twitter, Trello, Pinterest, contentIQ – und…? Die Fantastischen 4? Ein Rezept für Fanta-Kuchen? Fantasievolle Raumdeko? Man weiß es nicht.
Seiner Website ein Favicon zu verpassen, war also schon länger eine gute Idee, vor allem aus Usability-Sicht. Aber auch aus der SEO-Perspektive sind die bunten Icons eine gute Idee – auch wenn Google einem die Einschätzung der SEO-Relevanz von Favicons nicht allzu leicht macht.
(Sorry, bevor die Neugierde dich zu sehr ablenkt, verrate ich es dir natürlich noch: Fantasy-Buchtipps wären es gewesen. Brauche ich nämlich ständig.).
Favicons als SEO-Faktor?
Vielleicht ist es dir auch schon aufgefallen: Die Anzeige der Google-Suchergebnisse ändert sich ständig. Mehrere Monate lang wechselte die Anzeige in der Desktop-Suche zuletzt – möglicherweise je nachdem, auf welchem Server man gerade gelandet war? – immer hin und her zwischen einer Suchergebnisliste mit und einer ohne Favicons. Zwischenzeitlich schien Google sich mal auf eine Anzeige mit Favicons festgelegt zu haben. Und dann waren von einem Tag auf den anderen plötzlich alle Favicons wieder aus den Google-SERPs verschwunden – und ein ganz neues, maximal langweiliges Design an der Tagesordnung.
Altes SERP-Snippet:
SERP-Snippet mit Favicon:
Neues SERP-Snippet ohne Favicon:
Braucht man jetzt also doch keine Favicons mehr?
Google hat sie wieder rausgeworfen, also braucht man sie nicht mehr? Stop.
Erstens stimmt das nicht ganz. Denn in der mobilen Suche sind auch bei Google nach wie vor – zumindest mit manchen Browsern – bunt bebilderte Google-SERPs zu finden.
Hier fungiert das Favicon nach wie vor als ein echter Hingucker, auf den man aus SEO-Sicht auf keinen Fall verzichten sollte. Und ganz am Rande: Auch in anderen Suchmaschinen (DuckDuckGo und Qwant zum Beispiel) werden die Suchergebnisse mit Favicons versehen.
Und zweitens gibt es ja auch außerhalb von SEO noch diverse andere Gründe, warum ein Favicon eine gute Idee ist.
Seiner Website ein Favicon zu verpassen, ist eine gute Idee. Ob mit oder ohne Favicons in den Google-SERPs. #SEO #Usability #Favicon Share on XWas passiert, wenn ich kein Favicon habe?
Genau wie im Browser setzen Google & Co. in diesem Fall ein generisches Icon ein.
Das sieht maximal langweilig aus, musst du zugeben, oder? Und vor allem hat es keinerlei Identifikations- oder Wiedererkennungspotenzial, denn diese kleine Grafik teilst du dir mit allen anderen favicon-losen Websites da draußen.
Ok, Favicons sind also gut für’s Zurechtfinden in den Browser-Tabs und außerdem zumindest kein Nachteil für SEO. War das alles? Nicht ganz.
Wofür werden Favicons sonst noch genutzt?
Wenn jemand die entsprechende Website als Lesezeichen auf dem Startbildschirm seines Android- oder iOS-Smartphones ablegt, wird für das entsprechende TouchIcon auf das Favicon zurückgegriffen. Und auch, wenn die Seite in einer Kachel im Windows-Startbildschirm verlinkt wird. Favicons werden also an allen möglichen verschiedenen Orten zum visuellen Repräsentanten deiner Website.
Wir wissen also jetzt, WARUM du auf ein Favicon nicht verzichten solltest. Aber WIE kommst du an ein gutes Favicon?
Auch offline kommen Favicons zum Einsatz. Zum Beispiel auf dem Camino de Santiago, dem Jakobsweg. Die Jakobsmuschel weist den Weg – und jeder weiß, wo es hingeht. | Foto: Katja Flinzner
Wie sieht ein gutes Favicon aus?
Das ist eigentlich eher eine Design-Frage, aber da ich hierzu erstaunlicherweise kein wirklich gutes verlinkbares How-to gefunden habe, habe ich zusammen mit dem Grafik-Designer meines Vertrauens ein paar grundlegende Tipps zusammengestellt:
Wiedererkennungseffekt
Für den perfekten Wiedererkennungseffekt sollte dein Favicon idealerweise auf deinem Logo oder einem anderen Teil deiner Websitegestaltung basieren.
Weniger ist mehr
Noch wichtiger ist, dass dein Favicon auf einen Blick erkennbar ist. Wenn dein Logo eher groß oder komplex ist, kann es eine gute Lösung sein, nur einen (besonders auffälligen) Teil davon für das Favicon zu nutzen. Das tue ich hier auf contentIQ zum Beispiel. Und auch Google selbst nutzt nur das G als Hingucker im Favicon.
Auffällige Farben
Hand auf’s Herz! Angenommen, die Inhalte wären vergleichbar: Auf welchen der beiden folgenden Einträge würdest du wohl eher klicken?
Obwohl der Eintrag weiter unten steht, fällt das SERP-Snippet von Osiander dank des prägnanten Favicons deutlich stärker ins Auge als das fast schon versteckte Icon von Tad-Time. Such dir für das Favicon also idealerweise die knalligste Farbe aus deiner CI-Farbpalette aus.
Weniger ist mehr. Favicons brauchen klare Farben und klare Strukturen, damit sie in den mobilen Google-SERPs nicht untergehen. #SEO #Favicon #SERPs Share on XWelche Größe braucht mein Favicon?
Klingt nach einer einfachen Frage, aber jetzt wird es tricky. Denn wie wir oben gesehen haben, werden Favicons inzwischen für die unterschiedlichsten Einsatzbereiche genutzt. Früher war ein Favicon 16 x 16 oder maximal 32 x 32 Pixel groß. Man kann sich aber schnell vorstellen, dass das für ein Smartphone-Bildschirm-Icon nicht ausreicht. Und für Windows-Kacheln schonmal gar nicht.
Wenn du alle diese Fälle abdecken möchtest, brauchst du dein Favicon deshalb in einer ganzen Reihe verschiedener Größen, von 16 x 16 bis 588 x 588 Pixeln. Das ist aber nicht das einzige Problem. Denn die verschiedenen Einsatzbereiche haben auch noch dazu ganz unterschiedliche Design-Vorgaben. Manche funktionieren gut mit transparenten Hintergründen, manche nicht, für manche ist ein monochromer Einsatz vorgesehen, manche hätten gerne besondere Hintergrundfarben usw. usw.
Wie bringe ich mein Favicon in WordPress zum Einsatz?
Eigentlich würde es genügen, das Favicon mit dem Namen favicon.ico ins Rootverzeichnis (also das Hauptverzeichnis deiner Website) zu legen. Dort sucht der Browser sowieso danach, wenn er keine anderen Anweisungen bekommt.
In WordPress kannst du dein Favicon (WordPress nennt es „Website-Icon“) inzwischen über den Customizer (Design > Customizer) hochladen, das funktioniert für den Basis-Einsatz ziemlich gut – meist besser als die Funktionen der Themes.
Wenn du alle oben genannten Fälle abdecken möchtest, reicht das aber in der Regel nicht aus. Du kannst es selber testen: Gib deine Web-Adresse mal in das Testtool von RealFaviconGenerator ein, um zu prüfen, ob dein Favicon für alle erdenklichen Einsatzbereiche gerüstet ist. Und wenn nicht, gibt es das passende Plugin dort direkt dazu.
Das Plugin „Favicon by RealFaviconGenerator“ ist wirklich ein super Helfer für den Favicon-Rundumschlag. Nach dem Installieren kannst du über Design > Favicon eine Datei als Favicon hochladen (mindestens 260×260 Pixel sollte sie groß sein, ich habe gute Erfahrungen mit der für Windows-Kacheln maximal genutzten Größe 588 x 588 Pixel gemacht). Das Plugin leitet dich nach Klick auf „Generate Favicon“ dann auf eine externe Website, wo du noch diverse Einstellungen (Hintergrundfarben, Monochrom-Einstellungen) für einzelne Einsatzbereiche machen kannst, bevor das vollständige Icon-Set mit allen nötigen Infos mit einem weiteren Klick in deine WordPress-Installation übernommen wird.
Geschafft?
Prima. Dann kann man deine Website jetzt nicht nur in einer Horde geöffneter Browsertabs schneller wiederfinden, sondern sie macht auch dann noch eine gute Figur, wenn jemand sie so toll findet, dass er sie direkt von seinem Smartphone-Bildschirm aus starten möchte. Und noch dazu wird sie in der mobilen Google-Suche besonders auffällig angezeigt.
Und selbst wenn Google sie wieder gänzlich aus den SERPs werfen sollte, kann uns das ziemlich egal sein. Denn schließlich optimieren wir unsere Seiten ja nicht für eine Suchmaschine, sondern für Menschen. Und die werden Favicons immer praktisch finden, auch nach dem tausendsten Google-SERP-Redesign.
KF/ciq
- Warum ist es wichtig, für mehr Klimaschutz zu demonstrieren? - 6. September 2023
- Personas und SEO: Für wen optimierst du eigentlich? - 19. Oktober 2022
- Wählen für’s Klima. - 24. September 2021
Das Plugin ist ein wirklich guter Tipp für WordPress. Ich habe bisher mit diesem Favicon-Generator gearbeitet: https://www.favicon-generator.org/. Die Favicons/Icons habe ich zu Fuß (PHP, Template Engine) eingebunden.
Wie es aussieht, gibt es auch ein Modul für Drupal 7/8, das auf denselben Favicon-Generator (https://realfavicongenerator.net/) wie das WordPress-Plugin zugreift: https://www.drupal.org/project/responsive_favicons. Bei dem muss man die Bilder auch erst einmal extern generieren. Für TYPO3 gibt es leider keine komfortable Lösung, da ist man mit ein paar Zeilen Typoscript besser bedient.