Favicon

Das kleine Symbol im Browser-Tab ist meist das Erste, was ein Besucher von deiner Website sieht, noch bevor die Seite vollständig geladen ist. Es erscheint in der Lesezeichenleiste, in der Browserhistorie, auf dem Startbildschirm von Smartphones und seit einigen Jahren auch in den Google-Suchergebnissen auf mobilen Geräten. Dieses Symbol heißt Favicon.

Technisch ist ein Favicon eine kleine Grafikdatei. Inhaltlich ist es ein Wiedererkennungselement. Wer mehrere Tabs gleichzeitig offen hat, navigiert zwischen ihnen über genau diese kleinen Icons. Wer eine Seite bookmarkt, sieht das Favicon neben dem Seitentitel. Das ist kein großes SEO-Werkzeug, aber ein stilles Markensignal, das täglich wirkt.

Was ein Favicon ist und woher der Begriff kommt

Der Begriff „Favicon“ ist eine Abkürzung für „Favorite Icon“. Microsoft führte das Konzept Ende der 1990er Jahre im Internet Explorer ein. Damals erschien das Icon ausschließlich in der Lesezeichenleiste, wenn eine Seite als Favorit gespeichert wurde.

Heute ist das Favicon überall: im Browser-Tab, in der Adressleiste, im Verlauf, in der Lesezeichenleiste, als App-Icon auf dem Homescreen eines Smartphones und als kleines Symbol neben dem Seitentitel in den mobilen Google-Suchergebnissen.

Fehlt das Favicon, zeigen Browser einen grauen Standardplatzhalter. Das ist kein technischer Fehler, aber es signalisiert, dass an dieser Stelle nicht sorgfältig gearbeitet wurde.

Wo das Favicon überall auftaucht

Browser-Tab: Die sichtbarste Position. Wer viele Tabs offen hat, erkennt Seiten an ihren Icons. Ein prägnantes Favicon macht deine Seite in der Tab-Leiste sofort identifizierbar.

Lesezeichen und Verlauf: Wer eine Seite bookmarkt oder im Browserverlauf sucht, sieht Favicon und Seitentitel nebeneinander. Ein fehlendes oder generisches Favicon macht die Seite schwerer wiederzufinden.

Mobilgeräte und Homescreen: Wer eine Website auf dem iPhone oder Android-Gerät zum Homescreen hinzufügt, bekommt das Favicon als App-Icon angezeigt. Hier ist eine spezifische Größe notwendig, der sogenannte Apple Touch Icon, der mit 180 x 180 Pixeln deutlich größer ist als das Standard-Favicon.

Google-Suchergebnisse auf Mobilgeräten: Google zeigt seit einigen Jahren in den mobilen Suchergebnissen das Favicon neben dem Seitentitel und der URL an. Das ist die SEO-relevanteste Position, weil es die Klickrate beeinflusst. Eine Seite mit einem klaren, markentypischen Favicon wirkt in den Suchergebnissen professioneller als eine Seite mit grauem Platzhalter.

Favicon und SEO

Das Favicon ist kein direkter Rankingfaktor. Google wertet es nicht als Signal für die Qualität oder Relevanz einer Seite. Der indirekte Effekt ist aber real.

In den mobilen Suchergebnissen erscheint das Favicon sichtbar neben jedem Ergebnis. Nutzer scannen Suchergebnisse in Millisekunden und entscheiden auf Basis von Titel, URL, Description und visuellen Elementen, worauf sie klicken. Ein wiedererkennbares Favicon bei Nutzern, die die Marke bereits kennen, kann die Klickrate bei Branded Searches messbar erhöhen.

Google hat außerdem klare Richtlinien für Favicons in den Suchergebnissen: Das Icon muss mindestens 48 x 48 Pixel groß sein, darf keine anstößigen Inhalte zeigen und sollte die Marke repräsentieren. Wer kein Favicon hinterlegt, bekommt in den mobilen Suchergebnissen einen generischen Globus angezeigt.

Die richtigen Formate und Größen

Ein Favicon wird nicht in einer einzigen Größe benötigt. Verschiedene Geräte und Anwendungsfälle verlangen unterschiedliche Abmessungen. Das klingt aufwendig, lässt sich aber mit den richtigen Tools schnell lösen.

Formate im Überblick

ICO ist das älteste und am weitesten verbreitete Favicon-Format. Es kann mehrere Bildgrößen in einer Datei bündeln und wird von praktisch allen Browsern unterstützt. Für die einfache Einbindung über favicon.ico im Stammverzeichnis einer Website ist es nach wie vor der Standard.

PNG ist flexibler und eignet sich besonders für größere Favicon-Varianten sowie für den Apple Touch Icon. PNG unterstützt Transparenz und liefert bei größeren Abmessungen bessere Qualität als ICO.

SVG ist ein vektorbasiertes Format, das verlustfrei in jede Größe skaliert. Nicht alle Browser unterstützen SVG-Favicons vollständig, aber moderne Browser wie Chrome und Firefox können damit umgehen. SVG eignet sich besonders für Logos mit klaren Formen und ist zukunftssicher.

Empfohlene Größen

Für eine vollständige Favicon-Einbindung brauchst du in der Praxis mindestens drei Varianten:

16 x 16 und 32 x 32 Pixel für Browser-Tabs und Standardanzeigen. Diese Größen sind die Basis und reichen für die meisten Desktop-Anwendungen aus.

180 x 180 Pixel als Apple Touch Icon für iOS-Geräte. Wer diesen nicht hinterlegt, generiert iOS automatisch aus einem Screenshot der Seite, was selten gut aussieht.

48 x 48 Pixel (oder Vielfache davon) für die Anzeige in den Google-Suchergebnissen. Google empfiehlt Größen wie 48 x 48, 96 x 96 oder 144 x 144 Pixel.

Wie du ein Favicon erstellst

Du brauchst kein Design-Profi zu sein um ein brauchbares Favicon zu erstellen. Es gibt zwei sinnvolle Wege.

Aus dem vorhandenen Logo ableiten: Der einfachste Ansatz ist, das bestehende Logo auf eine quadratische Form zuzuschneiden und auf die benötigten Größen zu skalieren. Das funktioniert gut bei Logos mit einfachem Icon-Element oder Initiale. Wichtig: Ein Favicon muss auch bei 16 x 16 Pixeln noch erkennbar sein. Komplexe Logos mit viel Text werden in dieser Größe unleserlich und sollten auf das wesentliche Symbol reduziert werden.

Favicon-Generator nutzen: Tools wie favicon.io oder realfavicongenerator.net nehmen eine hochaufgelöste Grafikdatei und erzeugen automatisch alle benötigten Größen und Formate inklusive des HTML-Codes zur Einbindung. Das spart Zeit und stellt sicher, dass alle Varianten korrekt erzeugt werden.

Einbindung in die Website

Das Favicon wird im <head>-Bereich der Website eingebunden, ähnlich wie Meta-Tags. In den meisten CMS-Systemen gibt es dafür eine eigene Einstellung, sodass kein manueller Eingriff in den Code nötig ist.

In WordPress findest du die Favicon-Einstellung unter „Design“ und dann „Website-Identität“. Dort lässt sich das sogenannte „Website-Symbol“ direkt hochladen. Das CMS übernimmt die Einbindung im Quellcode automatisch.

Bei manuell erstellten Websites oder individuellen Setups wird die favicon.ico-Datei im Stammverzeichnis des Servers abgelegt. Browser suchen dort automatisch nach einem Favicon, auch ohne expliziten HTML-Hinweis.

Häufige Fehler

Favicon zu komplex gestaltet: Was als vollständiges Logo gut aussieht, wird bei 16 x 16 Pixeln zu einem unlesbaren Pixelhaufen. Das Favicon muss auf kleinstem Format funktionieren. Einfache Formen, starker Kontrast und eine klare Silhouette sind entscheidend.

Nur eine Größe hinterlegt: Wer nur die Standard-favicon.ico einbindet und den Apple Touch Icon vergisst, bekommt auf iOS-Geräten automatisch generierte, meist hässliche Homescreen-Icons.

Kein Favicon vorhanden: Der Platzhalter-Globus in den mobilen Google-Suchergebnissen wirkt unprofessionell. Das Favicon ist eine der einfachsten technischen Maßnahmen überhaupt und sollte bei keiner Website fehlen.

Falsches Dateiformat für die Größe: ICO funktioniert gut für kleine Größen, verliert aber bei großen Abmessungen an Qualität. PNG ist für alles über 32 x 32 Pixel die bessere Wahl.

Ein Favicon gehört zu den Grundlagen, die beim Aufbau einer Website von Anfang an mitgedacht werden sollten. Wer eine neue Website in Auftrag gibt, sollte das Thema im Briefing erwähnen und sicherstellen, dass die beauftragte Webdesign Agentur alle benötigten Größen und Formate korrekt einbindet, inklusive Apple Touch Icon und der Variante für die Google-Suchergebnisse.