Mehr Sichtbarkeit Durch das Favicon
Ich verrate dir, warum das Favicon ein echter SEO-Tipp ist und wie du dadurch sichtbarer bei Suchmaschinen werden kannst.
Das Favicon: Kleine Grafik, große Auswirkung. In diesem Ratgeber erfährst du, was das Favicon genau ist, wie du ein gutes Favicon erstellen kannst und welche Auswirkungen das Favicon auf die Sichtbarkeit in Suchmaschinen haben kann. Kurz und knapp: Ist das Favicon überhaupt SEO-relevant?
Was ist ein Favicon?
Du hast vielleicht schon bemerkt, dass viele Websites ein kleines Symbol in der Adressleiste des Browsers anzeigen. Dieses Symbol ist das sogenannte Favicon. Es ist nur ein paar wenige Pixel groß, kann aber einen großen Einfluss auf die Sichtbarkeit deiner Website haben. Wenn ein Benutzer deine Seite besucht, wird das Favicon neben der URL angezeigt und kann als visuelle Erinnerung an deine Website dienen. Es kann auch beim Auffinden deiner Website in Suchmaschinen behilflich sein. Daher ist es wichtig, dass du ein Favicon erstellst, um die Sichtbarkeit deiner Website zu erhöhen und den Benutzern eine bessere Erfahrung zu bieten. Mit einem einfachen Favicon kannst du dich von der Konkurrenz abheben und deine Marke stärken.
Das Favicon wird an folgenden Stellen genutzt:
- In der Browserleiste und in Registerkarten / Tabs
- Als Lesezeichen im Browser
- Beim Browser-Startbildschirm in den zuletzt aufgerufenen Websites
- Als Icon auf dem Smartphone-Startbildschirm
- In den Suchergebnissen bei Google
- WordPress nutzt das Favicon seit WP 6.1 im Block-Editor, um den Editor zu verlassen
Was passiert, wenn kein Favicon hinterlegt ist?
Sporadisch kommt es auch vor, dass ein Webseitenbetreiber gar nicht weiß, dass man ein Favicon auf der Website hinterlegen kann oder diese Funktion schlichtweg als nicht nötig erachtet. Wenn kein Favicon hinterlegt ist, äußert sich das meistens folgendermaßen:
- Bei CMS Systemen wird das Standard-Favicon vom CMS ausgespielt. Bei WordPress ist das zum Beispiel das blaue WordPress Logo.
- Ist kein Standard-Favicon von einem CMS hinterlegt, wird je nach Browser nichts oder ein leeres Dokumenten-Icon angezeigt.
Beides ist nicht gut für den Wiedererkennungswert. Wenn zum Beispiel bei einer WordPress-Seite das Standard-Favicon angezeigt wird, weiß ich sofort, dass der Webdesigner das vergessen oder seine Arbeit nicht richtig erledigt hat. Ein nicht vorhandenes Favicon sticht mir sofort ins Auge, weil ich finde, dass jede Website ein Favicon haben sollte.
Auf folgendem Foto siehst du links das Favicon von Stack Overflow und rechts das Favicon einer WordPress Seite.
Für diesen Ratgeber habe ich extra das Favicon meines Blogs MountainbikeLiebe vor ein paar Tagen entfernt, um dir zu demonstrieren, wie eine WordPress-Website ohne Favicon in der Google-Suche aussieht. Ich persönlich finde, dass das nicht seriös aussieht. Kein Wiedererkennungswert. Es sieht nach einem einfachen Hobby-Blog auf WordPress-Basis aus.
Wo wird das Favicon eingefügt?
Technisch gesehen wird das Favicon im <head> Bereich deines HTML-Codes hinterlegt.
<head>
<title>Seitentitel</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>Bei WordPress kannst du die Datei über den Customizer unter Website-Informationen → Website-Icon einbinden.
Achtung: Bei WordPress musst du nichts in den Quellcode einfügen. Dort wird das Favicon automatisch skaliert und im Quellcode hinterlegt.
Wie erstelle ich ein Favicon?
Bei der Erstellung deines Favicons solltest du ein paar grundlegende Gestaltungsrichtlinien beachten. Es ist wichtig, dass das Bild eine hohe Auflösung und eine klare Sichtbarkeit aufweist. Der Nutzer möchte ja keine Pixel zählen. Denke auch daran, welche Farben du verwendest und wie sie zu deiner Website und deinem Branding passen.
Stelle sicher, dass das Bild leicht zu erkennen ist. Außerdem solltest du darauf achten, dass das Favicon in verschiedenen Größen gut aussieht. Es wird nämlich nicht nur auf deiner Website angezeigt, sondern auch in den Lesezeichen der Nutzer und bei Suchergebnissen. Je nach Plattform oder Gerät kann die Größe des Favicons variieren.
Meist leitet sich das Favicon aus dem Logo ab oder ist ein Teil des Logos.
Du kannst ein Favicon ganz einfach mit einem Bildbearbeitungsprogramm erstellen. Ich habe für mein Favicon Canva genutzt.
Wie groß soll das Favicon sein?
Früher war diese Frage einfacher zu beantworten, weil vor ein paar Jahren noch Bilder mit einer Auflösung von 16×16px oder 32×32px ausgereicht haben. Inzwischen werden mehrere Größen gefordert, um verschiedene Anwendungen und Geräte bedienen zu können. Und meistens werden die automatisch heruntergerechnet.
Im Quellcode dieser Website finde ich drei verschiedene Favicon-Variationen:
- 32×32px
- 192×192px
- Apple Touch Icon
<link rel="icon" href="https://einfach-mal-seo.de/wp-content/uploads/2021/11/Einfach_mal_SEO_Favicon.png" sizes="32x32" />
<link rel="icon" href="https://einfach-mal-seo.de/wp-content/uploads/2021/11/Einfach_mal_SEO_Favicon.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://einfach-mal-seo.de/wp-content/uploads/2021/11/Einfach_mal_SEO_Favicon.png" />Ich habe übrigens lediglich ein PNG-Bild in meinem WordPress-System hinterlegt. Die skalierten Größen wurden automatisch berechnet und eingefügt.
Das Favicon ist das erste Element, das Nutzer einer Website sehen. Daher ist es wichtig, dass dieses Element einprägsam und zuverlässig ist. Die richtige Auflösung ist daher entscheidend, um ein qualitativ hochwertiges Favicon zu erhalten.
Das richtige Dateiformat für das Favicon
Es gibt verschiedene Bildformate, über die ich auch schon in meinem Bilder-SEO Ratgeber geschrieben habe. Allerdings gelten für das Favicon andere Empfehlungen als für die Bilder, die auf einer Website sichtbar eingefügt werden.
Windows ICO
Mit dem ICO Format fing alles an. Der Vorteil dieses Bildformates ist, dass es mehrere Auflösungen und Bildtiefen enthalten kann. Es funktioniert eigentlich überall und wurde entwickelt, um Icons darzustellen. Neben den gängigen Bildbearbeitungstools kann auch ein Bild via Online-Converter in dieses Format konvertiert werden.
PNG
Eine PNG-Grafik kann so gut wie mit jedem Programm erstellt werden und es unterstützt Transparenz. Daher ist meine Empfehlung auch, das Favicon als PNG zu speichern. Einziger Nachteil: PNG-Favicons werden von Internet Explorer nicht unterstützt. Aber ganz ehrlich: Wer heutzutage den Internet Explorer noch nutzt, muss auch damit rechnen, dass dieser nicht alles richtig anzeigt. Mir ist die Kompatibilität auf verschiedenen Endgeräten und Browsern sehr wichtig – aber irgendwo muss man auch mal eine Grenze ziehen. 😉
JPG
Das Dateiformat JPG funktioniert eigentlich überall, hat aber eine schlechtere Auflösungsqualität bei Icons als PNG und unterstützt auch keine Transparenz.
SVG
SVG ist ein vektorbasiertes Dateiformat, welches Icons hochauflösend darstellen kann. Mittlerweile wird SVG von allen gängigen Browsern unterstützt.
GIF
Der Vorteil von GIF Bildern ist, dass diese animiert werden können. So kann also auch ein Favicon animiert werden. Aber jetzt mal ehrlich: Sind wir nicht aus diesem Zeitalter raus, in dem alles auf der Website blinken und herumfliegen musste?
Was macht ein gutes Favicon aus?
In der HTML-Dokumentation von W3 wird empfohlen, für das Favicon ein kleines, einfaches Bild, mit einem hohen Kontrast zu verwenden.
Tip: A favicon is a small image, so it should be a simple image with high contrast.
W3Shools
Ein gutes Favicon sollte…
- einzigartig sein
- einen Wiedererkennungswert haben
- lesbar und erkennbar sein
- zu deiner Marke und deinem Branding passen
Ein gutes Favicon ist schlicht und einfach. Meist wird das Favicon ziemlich klein angezeigt, daher sind Fotos oder komplexe Grafiken oft eine schlechte Wahl. Zu unübersichtliche Favicons können den Nutzer auch verwirren.
Da ich selbst „nur“ eine SEO-Expertin bin, habe ich noch eine Designerin nach ihrer Meinung zum Favicon gefragt:
„Gerade, wenn man im Alltag viele Tabs auf hat oder die Lesezeichenleiste überquillt, sorgt das Favicon dafür, dass deine Website schnell wiedergefunden wird. Ich erstelle für meine Kunden immer ein individuelles Favicon, dass sich meist aus dem Logo ableitet. So wirkt der Webauftritt direkt professioneller und die Markenidentität wird gestärkt.“
Jennifer Zielinski
Ist das Favicon SEO-relevant?
Ein gut gestaltetes Favicon kann deine Website ästhetisch und einprägsam machen und die Wahrscheinlichkeit erhöhen, dass Besucher sich an deine Marke erinnern.
Doch wie hängt das jetzt mit der Suchmaschine zusammen?
Seit Oktober 2022 zeigt Google das Favicon in den mobilen Suchergebnissen mit an. Nach einigen Tests wird das Favicon nun auch seit Anfang März 2023 in den regulären Suchergebnissen auf dem Desktop ausgespielt.
Dadurch erhält die Markenbekanntheit eine noch größere Bedeutung. Ist dem Nutzer der Suchmaschine die Marke oder das Favicon bekannt und vertraut, wird mit einer größeren Wahrscheinlichkeit auf das Suchergebnis geklickt.
Ein einzigartiges, auffälliges Favicon kann so auch zu mehr Klicks in den Suchergebnissen führen.
Ich habe dir einen Screenshot aus der Google-Suche für den Suchbegriff „SEO KI“ mitgebracht. Auf Google Platz 1 sehe ich direkt anhand des Favicons, dass es sich um Neil Patel handelt. Ich würde fast behaupten, dass ich mir das Favicon erst anschaue und dann den Text lese. Es zieht einfach die Aufmerksamkeit auf sich. Und weil Neil Patel so ein prägnantes Favicon mit Wiedererkennungswert nutzt, habe ich ihn natürlich gleich erkannt. Das gilt selbstverständlich auch für das darauffolgende OMT Magazin und T3N Magazin. Die beiden Magazine haben nämlich noch einen Schriftzug im Favicon, welcher direkt auffällt.
Und dann, an vierter Stelle ist sie: Die grüne Lupe. Mein Favicon. Und ich hoffe, dass sich die grüne Lupe bei meiner Zielgruppe gut einprägt und sie diese mit meiner Marke und SEO-Expertise verknüpfen.
Dabei hilft das Favicon allerdings NICHT, um in den Suchergebnissen weiter nach oben zu kommen. Es hilft lediglich, die Nutzerfreundlichkeit und die Wiedererkennbarkeit zu steigern. Aber auch das ist meiner Meinung nach eine wichtige Stellschraube der großen, ganzen Suchmaschinenoptimierung.
Persönliches Fazit
Letztlich ich das Favicon ein Must-have für jede Website, weil es dem Nutzer hilft, die Website leichter zu identifizieren und Teil des Brandings ist.
Ich muss gestehen, dass ich gerne mit vielen Tabs in meinem Browser arbeite. Auch während ich diesen Blogbeitrag schreibe, ist meine Browserleiste voll mit Tabs. Wenn ich suche und recherchiere, dann füllt sich mein Browser automatisch.
Die einzige Möglichkeit, um den richtigen Tab zu identifizieren und auszuwählen ist es, sich auf das Favicon der jeweiligen Website zu konzentrieren. Ich weiß genau, dass die grüne Lupe meine Website ist, während die Google Search Console wie eine Zeitung aussieht.
Ohne das Favicon wäre ich in meinem Browser-Wirrwar verloren.
Lisa
Lisa Augustin
Software-Entwicklerin, SEO-Expertin, Bloggerin, GenussbikerinLisa Augustin (geb. Lisa Rudolf) hatte schon immer eine Vorliebe für Algorithmen und technische Probleme. Nach ihrem Informatikstudium hat sie über 5 Jahre lang Berufserfahrung als Softwareentwicklerin gesammelt, während sie nebenher einen Blog über gesunde Ernährung und Radsport geschrieben hat. In dieser Zeit hat sich auch eine Leidenschaft für Suchmaschinenoptimierung (SEO) entwickelt. Und dieser Leidenschaft geht Lisa jetzt hauptberuflich nach. Ihre Mission ist es, SEO verständlich zu erklären und andere Selbstständige, Blogger und kleine Unternehmen dabei zu unterstützen.
