Was ist ein Favicon und wie man eins erstellt
Das Favicon ist ein kleines Bild, das in Webbrowsern für eine Website steht. Wenn du jetzt einen Blick auf die Adressleiste deines Browsers wirfst, wirst du sicher mehrere Favicons sehen, darunter auch das von SE Ranking. In der Regel enthalten Favicons ein Logo, den Anfangsbuchstaben des Firmennamens oder einfach ein Bild, das die Charakteristik der Website widerspiegelt, die es repräsentiert.
Favicons helfen uns, jeden Browser-Tab optisch schnell mit einer bestimmten Website zu verknüpfen. Wenn du dazu neigst, Dutzende von Tabs gleichzeitig geöffnet zu haben, (so dass du irgendwann deren Titeln nicht mehr lesen kannst), sind Favicons deine besten Freunde. Sie erleichtern dir das Auffinden der gewünschten Webseite erheblich.
Auch wenn Favicons klein und unbedeutend erscheinen, können sie doch einen großen Unterschied in Bezug auf das Nutzererlebnis und das Online-Branding machen. In diesem Beitrag erfährst du, woher Favicons kommen, welche Arten von Favicons in modernen Browsern verwendet werden und wie du eines für deine Website erstellst.
Vom Internet Explorer zu Googles SERPs
Im Jahr 1999 wurde das Favicon im Internet Explorer eingeführt, um Suchenden zu helfen, Websites mit Lesezeichen von anderen zu unterscheiden. Und da die mit Lesezeichen versehenen Seiten im Internet Explorer “Favoriten” genannt wurden (und wahrscheinlich immer noch werden), wurden die Wörter “Favorit” und “Icon” zu einem neuen Begriff zusammengefügt.
1. Heutzutage werden Favicons direkt über der Adresszeile angezeigt, unabhängig davon, ob die Website mit einem Lesezeichen versehen ist oder nicht. Und für den unwahrscheinlichen Fall, dass eine Website kein Favicon hat, zeigt der Browser ein allgemeines Browser-Symbol an.
2. Abgesehen von der Adresszeile sind Favicons auch im Browserverlauf zu finden.
3. Mit Lesezeichen versehene Seiten haben ebenfalls ein Favicon, sowohl in der Lesezeichenleiste.
4. Seit Mai 2019 verwendet Google Favicons in den mobilen SERPs, und wurde für Desktop-SERPs getestet, wird nun aber nicht angezeigt.
So kann man ein Favicon erstellen
Favicons ziehen die Aufmerksamkeit der Nutzer auf sich und steigern die Markenbekanntheit. Wenn Nutzer eine Website mit einem einprägsamen Favicon ein paar Mal besuchen, werden sie sie in Zukunft leicht von anderen unterscheiden können. Denk an eine berühmte Marke, mit der du täglich zu tun hast, wie Facebook oder Twitter – vermutlich kannst du dir das Favicon mit geschlossenen Augen problemlos vorstellen.
Die Favicons von Facebook und Twitter sehen genauso aus wie ihre jeweiligen Logos. Bedeutet das also, dass du für ein Favicon nur dein Logobild verkleinern und auf deine Website hochladen musst? Lass uns tief in die technischen Details eintauchen und herausfinden, was zum Erstellen eines Favicons nötig ist.
Technische Voraussetzungen für die Erstellung eines Favicons
Wenn du willst, dass deine Favicons auf allen möglichen Geräten richtig angezeigt werden – in guter Qualität und mit dem Bild, das du im Kopf hast –, solltest du die Favicon-Richtlinien, Standards, Best Practices, also generell alle technischen Parameter, beachten.
Aber wo anfangen? Beginne damit, das richtige Favicon-Format und die richtige Größe auszuwählen.
Favicon-Format
Ursprünglich wurden alle Favicons als ICO-Dateien erstellt – ein Format, das von Microsoft entwickelt wurde, um Windows-Programmsymbole zu speichern. Der größte Vorteil dieses Formats ist, dass es Bilder in verschiedenen Größen in einer einzigen Datei speichern kann.
Früher unterstützte nur der Internet Explorer dieses Dateiformat, aber mit modernen Webbrowsern kannst du auch PNG-Icons verwenden. Einige Browser unterstützen JPEG, SVGs, und GIF-Favicons.
Die meisten Websites haben heute Favicons im PNG-Format. Der Grund dafür ist die Bildqualität: PNG-Favicons mit hoher browser- und plattformübergreifender Kompatibilität sehen in den meisten modernen Browsern und Geräten viel besser aus.
Favicons in den Dateiformaten SVG, GIF und JPEG sind in Bezug auf die Browserkompatibilität nicht optimal. Allerdings könnte sich das in Zukunft ändern. Das SVG-Format (Scalable Vector Images) könnte zur neuen Norm werden – es löst das Problem, mehrere Favicons in verschiedenen Größen erstellen zu müssen, um alle gängigen Geräte zu bedienen. Obwohl derzeit nur einige wenige Browser SVG-Favicons unterstützen, könnten andere schon bald nachziehen.
Welche Favicon-Formate von den verschiedenen Browsern unterstützt werden, erfährst du auf der Website Can I Use. Hier kannst du beispielsweise sehen, welche Browserversionen mit PNG- und SVG-Favicons kompatibel sind.
Favicon Größen
Die klassische Favicon-Größe beträgt 16х16 Pixel, was 32×32 Pixeln auf hochauflösenden Bildschirmen entspricht. Während Google 16x16px auf seinen mobilen SERPs verwendet, sagen aber seine Dokumentation, dass Favicons nicht in dieser Größe bereitgestellt werden sollen. Stattdessen empfiehlt Google, Favicons in einer höheren Auflösung zu erstellen, die ein Vielfaches von 48px im Quadrat ist. Die Größe deines Favicons sollte also 48x48px, 96x96px, 144x144px usw. betragen. SVG-Dateien hingegen müssen keine bestimmte Größe haben.
Da das size-Attribut in HTML5 eingeführt wurde, kannst du nun auch problemlos mehrere Größen desselben Icons angeben. Mit diesem Attribut kannst du die Breite und die Höhe des Favicons festlegen, und du kannst auch mehrere durch ein Leerzeichen getrennte Werte angeben:
<link rel=”icon” href=”favicon.png” sizes=”16×16″ type=”image/png”> (1 Größe)
<link rel=”icon” href=”favicon.png” sizes=”16×16 32×32″ type=”image/png”> (2 Größen)
Zusätzliche Richtlinien für ein Favicon
Und hier sind einige allgemeine Richtlinien von Google, an die du dich halten sollst:
- Verwende ein quadratisches Symbol
- das Favicon sollte nur deine Marke darstellen und keine unangemessenen Symbole (wie Hakenkreuze) enthalten – andernfalls wird es von Google nicht angezeigt und stattdessen das allgemeine Favicon-Symbol verwendet
- die Favicon-Datei sollte für Google-Crawler zugänglich sein (Google Favicon User Agent).
Die technischen Parameter von Favicons hängen weitgehend von den Geräten oder Browsern ab, die sie anzeigen. Aus diesem Grund gibt es Hunderte von Online-Diensten, die dir helfen, alle Feinheiten zu berücksichtigen und Favicons im richtigen Format und in der richtigen Größe zu erstellen.
Nutze das Internet zur Erstellung eines Favicons
Solltest du jemals auf die Idee kommen, den Namen deiner Logodatei einfach in favicon.ico zu ändern – vergiss es, so funktioniert das nicht. Du wirst höchstwahrscheinlich viele Fehlermeldungen erhalten, wenn es darum geht, dein Favicon in verschiedenen Browsern darzustellen.
Kann man das vermeiden?
Klar. Es gibt sogar verschiedene Möglichkeiten, ein Website-Favicon zu erstellen, zum Beispiel:
1) Erstelle es in einem grafischen Editor wie Photoshop mit einem speziellen Plugin namens Favicon.ico.2) Erstelle es mithilfe spezieller Online-Dienste (z. B. favicon.cc) und lade es von dort in einem geeigneten Format herunter.
3) Verwende ein vorhandenes Bild, z. B. dein Logo, und lade es in einen Online-Favicon-Generator wie Favicon.io, Realfavicongenerator.net etc. hoch.
4) Lade fertige Favicons aus speziellen Datenbanken herunter, z. B. Flaticon oder Findicons mit Tausenden Auswahlmöglichkeiten.
Sobald du das generierte Favicon heruntergeladen hast, musst du es nur noch in deine Website einfügen.
Deine Website mit einem Favicon schmücken
Zunächst lädst du dein Favicon mit einem Dateimanager wie Filezilla in den Stammkatalog deiner Website hoch. Dann musst du nur noch den folgenden Code in den <head></head>-Meta-Tag einfügen:
<head> ... <link rel=“icon” href=“https://yoursite.com/favicon.png” type=“image/x-icon”> <link rel=“shortcut icon” href=“https://yoursite.com/favicon.png” type=“image/x-icon”> ... </head>
Gut, nachdem wir nun alle wichtigen technischen Aspekte bezüglich Favicons geklärt haben, wollen wir uns nun damit beschäftigen, was bei deren Gestaltung als angemessen gilt und was du komplett aus deinem Gedächtnis streichen solltest.
Einfach heißt beim Favicon-Design nicht gleich schlecht
Bevor du losrennst, um deine nächste Favicon-Idee aufzuschreiben, solltest du dir die Suchergebnisse ansehen, die für deine Zielkeywords angezeigt werden. Wie sehen deren Favicons aus?
Und während du das tust, stelle dir diese Fragen:
Hebt sich dein Favicon von der Masse ab? Vielleicht füllen deine Konkurrenten ihre Favicons mit Farbe, und du könntest dich stattdessen für ein schwarz-weißes Favicon oder sogar für ein ganz anderes Konzept entscheiden.
Kann ein animiertes GIF-Favicon dir helfen, hervorzustechen? Oder wäre das für Suchende womöglich eher eine Beleidigung fürs Auge? Es könnte einen Effekt erzeugen, der (höchstwahrscheinlich) den Eindruck erweckt, dass deine Website noch nicht fertig geladen ist.
Ist dein Favicon klar ersichtlich, wenn es 16 × 16 Pixel groß ist? Tu dein Bestes und versuche nicht, kleine Details oder jede erdenkliche Farbe in deinem Favicon unterzubringen.
Ist dein Favicon repräsentativ für deine Nische und deine Website? Manchmal reicht ein Blick auf das Favicon einer Marke, um sofort zu erkennen, zu welcher Branche sie gehört. In anderen Fällen kannst du in dem Favicon sogar den genauen optischen Stil der Marke und ihrer Website erkennen.
Denke daran, dass ein gutes Favicon immer klar, simpel und einprägsam ist.
Jetzt, wo du weißt, wie du ein schönes, einprägsames Favicon erstellst und deiner Website hinzufügst, ist es an der Zeit, herauszufinden, ob es in den Suchmaschinen richtig angezeigt wird oder nicht. Schauen wir uns das genauer an!
Überprüfe dein Favicon auf kritische Fehler
Wenn du deine Website im Handy googelst, kannst du schnell überprüfen, wie dein Favicon in der Suche angezeigt wird. Du kannst auch dieses Linkbeispiel verwenden, um nur das Favicon deiner Website aufzurufen:
• http://www.google.com/s2/favicons?domain=mysite.com – füge statt mysite.com deine eigene Website hinzu, also z.B., http://www.google.com/s2/favicons?domain=seranking.com
Es gibt auch eine andere Möglichkeit zu prüfen, wie das Favicon auf verschiedenen Geräten aussieht: Mithilfe spezieller Online-Dienste, wie Realfavicongenerator.
Wenn dein Favicon jedoch aus irgendeinem Grund nicht richtig oder gar nicht bei Google angezeigt wird, überprüfe zunächst die folgenden Dinge:
• Befindet sich die Grafik im Stammverzeichnis der Ressource im Dateiformat, PNG oder SVG?
• Ist der Code, der zu dem Bild auf den Seiten der Ressource führt, korrekt ausgeschrieben?
• Ist eine Favicon-Datei für Suchcrawler zugänglich?
Ich möchte darauf hinweisen, dass der Pfad zum Bild einen direkten Einfluss darauf hat, wie gut das Favicon angezeigt wird. Wenn du dein Favicon löschen oder in irgendeiner Weise bearbeiten willst, musst du nur die Datei favicon.ico (JPEG, GIF, PNG) löschen oder ändern.
Im Allgemeinen gilt: Auch wenn du alles richtig machst, wird es einige Zeit dauern, bis Suchmaschinen Favicons indexieren. Es gibt sogar einen eigenen Bot (Google Favicon), der nichts anderes macht als das. Er lädt die Website-Icons auf seinen Server hoch, so dass es bis zu einigen Tagen dauern kann, bis deine Grafik indexiert wird.
Warum du auf ein Favicon nicht verzichten kannst
Favicons helfen Websites, sich im riesigen Ozean der Online-Ressourcen über Wasser zu halten, und machen sie in den Augen der Besucher attraktiver und professioneller.
Wenn du Hilfe bei deinem Favicon brauchst, kann unser Website Audit dich unterstützen. Es kann unter anderem einen vollständigen technischen Check-up für deine Website durchführen, bei dem auch dein Favicon gefunden wird.
Wenn du dir sicher bist, dass du ein Favicon hast, aber unser Website Audit es nicht zu sehen scheint, dann gibt es ein Indizierungsproblem oder die Adresse des Website-Icons ist falsch. Geh noch einmal alles durch, um sicherzugehen.
Du weißt doch, dass der Teufel im Detail steckt? Nun, dein Favicon ist ein sehr kleines Detail, das die öffentliche Wahrnehmung deiner Website und deiner Marke, ihren Wiedererkennungswert und sogar den Umfang des Such-Traffics beeinflussen kann. Unterschätze es nicht.
Ich fasse zusammen: Pfusche nicht an deinem Favicon herum, denn ein gutes Favicon ist ein wesentlicher Bestandteil deiner Marke und des technischen Standards deiner Website. Es ist jede Sekunde wert, die du dafür investierst.
