Favicon einfach erklärt: Warum das kleine Icon für deine Website unverzichtbar ist

Das Favicon ist eines der kleinsten Elemente einer Website und wird trotzdem von vielen Besuchern sofort wahrgenommen. Es erscheint im Browser-Tab, in der Lesezeichenleiste, in der Adresszeile und auf dem Homescreen mobiler Geräte. Ein fehlendes oder generisches Favicon signalisiert mangelnde Sorgfalt, während ein durchdachtes Icon Wiedererkennungswert schafft und Professionalität vermittelt. In diesem Beitrag erfährst du, was ein Favicon technisch ist, wie du es erstellst und korrekt einbindest.

Was genau ist ein Favicon?

Der Begriff Favicon setzt sich aus den Wörtern Favorite und Icon zusammen. Ursprünglich wurde es von Microsoft im Internet Explorer 5 eingeführt, um Lesezeichen visuell unterscheidbar zu machen. Heute ist das Favicon ein fester Bestandteil des Webstandards und wird von allen modernen Browsern unterstützt.

Technisch betrachtet handelt es sich um eine kleine Grafikdatei, die im HTML-Header einer Website referenziert wird. Der Browser lädt diese Datei und zeigt sie an verschiedenen Stellen an: im Tab, in der Verlaufsliste, bei gespeicherten Lesezeichen und als App-Icon, wenn eine Website auf dem Smartphone zum Homescreen hinzugefügt wird. Damit erfüllt das Favicon eine doppelte Funktion: Es dient der visuellen Orientierung und stärkt gleichzeitig die Markenwahrnehmung.

Technische Anforderungen an ein Favicon

In der Frühzeit des Favicons war das ICO-Format der einzige unterstützte Standard. Eine ICO-Datei kann mehrere Auflösungen in einer einzigen Datei bündeln, typischerweise 16x16, 32x32 und 48x48 Pixel. Der Browser wählt dann automatisch die passende Größe aus. Dieses Format wird nach wie vor von allen Browsern unterstützt und eignet sich als Fallback-Lösung.

Moderne Browser akzeptieren jedoch auch PNG, SVG und in manchen Fällen GIF als Favicon-Format. PNG bietet den Vorteil von Transparenz und verlustfreier Kompression bei festgelegter Pixelgröße. SVG hingegen ist ein vektorbasiertes Format, das bei jeder Auflösung scharf dargestellt wird. Gerade bei hochauflösenden Displays und variierenden Anzeigegrößen ist SVG die technisch überlegene Wahl.

Für die verschiedenen Einsatzkontexte werden unterschiedliche Größen empfohlen. Die folgende Übersicht zeigt die gängigsten Formate und ihre Verwendung:

Favicon erstellen: Worauf du achten solltest

Da ein Favicon extrem klein dargestellt wird, gelten bei der Gestaltung andere Regeln als bei einem regulären Logo. Feine Details, dünne Schriftzüge und komplexe Illustrationen funktionieren auf 16x16 Pixeln schlicht nicht. Reduziere das Design auf das Wesentliche: Ein einzelnes Zeichen, ein markantes Symbol oder ein stark vereinfachtes Logo eignen sich am besten.

Farbkontraste spielen eine zentrale Rolle. Das Icon muss sowohl auf hellen als auch auf dunklen Hintergründen erkennbar sein. Viele Browser verwenden mittlerweile Dark Mode, und auch Tab-Leisten können je nach Betriebssystem unterschiedliche Hintergrundfarben haben. Teste dein Favicon daher in beiden Farbschemata. Wenn du ein SVG-Favicon verwendest, kannst du über die CSS-Media-Query prefers-color-scheme sogar unterschiedliche Farbvarianten für den Hell- und Dunkelmodus definieren.

Transparente Hintergründe sind bei PNG- und SVG-Favicons möglich und in den meisten Fällen sinnvoll, da sie sich nahtlos in die jeweilige Browser-Oberfläche einfügen. Beim ICO-Format funktioniert Transparenz ebenfalls, jedoch nicht in allen älteren Browsern zuverlässig.

Favicon in deine Website einbinden

Die Einbindung erfolgt über Link-Elemente im HTML-Header deiner Website. Der klassische Ansatz referenziert eine favicon.ico-Datei im Root-Verzeichnis des Webservers. Viele Browser suchen automatisch unter der URL /favicon.ico nach dem Icon, auch ohne explizite Angabe im HTML. Verlasse dich darauf jedoch nicht, sondern setze die Referenz immer explizit.

Ein vollständiges Setup für maximale Kompatibilität sieht mehrere Link-Elemente vor: ein ICO-Fallback, ein PNG in verschiedenen Größen, ein SVG für moderne Browser sowie ein Apple Touch Icon für iOS-Geräte. Zusätzlich solltest du eine Web-App-Manifest-Datei (manifest.json) einbinden, die Icons für Android und Progressive Web Apps definiert. In dieser JSON-Datei werden die Icon-Pfade, Größen und der MIME-Typ angegeben.

Wenn du ein Content-Management-System wie WordPress verwendest, ist die Einbindung in der Regel über den Customizer möglich. Unter dem Punkt Website-Identität lässt sich ein Website-Icon hochladen, das WordPress automatisch in den passenden Größen ausliefert. Bei statischen Websites oder Custom-Themes fügst du die Link-Tags manuell in die header.php oder die entsprechende Template-Datei ein.

Caching-Probleme beim Favicon-Update

Browser cachen Favicons aggressiv. Wenn du ein bestehendes Favicon aktualisierst, kann es Tage oder sogar Wochen dauern, bis die neue Version bei allen Besuchern angezeigt wird. Ein bewährter Trick ist das Anhängen eines Query-Strings an die URL, etwa ?v=2, um den Browser-Cache zu umgehen. Alternativ kannst du den Dateinamen ändern und die HTML-Referenz entsprechend anpassen.

Favicon und SEO: Der indirekte Einfluss

Ein Favicon ist kein direkter Ranking-Faktor für Suchmaschinen. Google zeigt jedoch in den mobilen Suchergebnissen das Favicon neben der URL an. Ein professionelles, gut erkennbares Icon kann dadurch die Klickrate positiv beeinflussen, da es Vertrauen signalisiert und die visuelle Unterscheidung zu anderen Suchergebnissen erleichtert.

Google stellt bestimmte Anforderungen an Favicons, die in den Suchergebnissen angezeigt werden sollen: Die Datei muss crawlbar sein, darf also nicht durch die robots.txt blockiert werden. Sie sollte quadratisch sein und mindestens 48x48 Pixel groß. Inhalte, die Google als unangemessen einstuft, werden nicht angezeigt. Auch leere oder rein weiße Favicons filtert Google heraus und ersetzt sie durch ein generisches Icon.

Häufige Fehler bei Favicons

Der häufigste Fehler ist schlicht das Fehlen eines Favicons. Viele Websites liefern eine 404-Antwort für /favicon.ico, was unnötige Serveranfragen und Fehlermeldungen in den Logs erzeugt. Selbst wenn du kein individuelles Icon verwenden möchtest, solltest du eine Datei bereitstellen, um diese überflüssigen Requests zu vermeiden.

Ein weiterer Fehler ist die Bereitstellung nur einer einzigen Größe. Das führt dazu, dass Browser das Icon für verschiedene Kontexte hochskalieren müssen, was zu unscharfen Darstellungen führt. Stelle mindestens die oben genannten Standardgrößen bereit. Ebenso problematisch ist das Verwenden eines zu detaillierten Logos als Favicon, das in kleiner Darstellung nicht mehr erkennbar ist.

Dein professioneller Webauftritt mit easyname

Ein durchdachtes Favicon ist ein Baustein eines professionellen Webauftritts. Der Grundstein dafür ist eine passende Domain. Bei easyname findest du eine große Auswahl an Domainendungen, die du direkt registrieren und mit deinem Hosting verbinden kannst.

Für deine Website bietet dir easyname verschiedene Webhosting-Pakete, die je nach Projektgröße die passenden Ressourcen bereitstellen. PHP, MySQL-Datenbanken und ein einfach bedienbares Control Panel gehören dabei zum Standard. Wenn du mit WordPress arbeitest, lohnt sich ein Blick auf das WordPress Hosting von easyname, das speziell auf die Anforderungen des CMS abgestimmt ist und die Einbindung deines Favicons über den WordPress Customizer besonders unkompliziert macht.

Wer keine Programmierkenntnisse mitbringt, kann mit dem Website-Baukasten von easyname eine professionelle Website erstellen und das Favicon direkt über die Benutzeroberfläche hochladen. Für komplexere Projekte, bei denen du volle Kontrolle über Serverkonfiguration und Caching-Strategien benötigst, stehen die VPS Server von easyname zur Verfügung. Ergänzend dazu sorgen professionelle E-Mail-Adressen unter deiner eigenen Domain für ein einheitliches Erscheinungsbild, das zum Favicon und zur gesamten Markenidentität passt.