Favicon: Das kleine Icon mit großer Wirkung für deine Website

Was genau ist ein Favicon?

Der Begriff Favicon setzt sich aus Favorite und Icon zusammen. Ursprünglich wurde das kleine Bildchen von Microsoft im Internet Explorer 5 eingeführt, um Lesezeichen visuell voneinander unterscheidbar zu machen. Heute ist das Favicon ein fester Standard im Web und wird von allen modernen Browsern unterstützt.

Technisch handelt es sich um eine Bilddatei, die im HTML-Header einer Website referenziert wird. Klassisch wurde dafür das ICO-Format verwendet, mittlerweile sind PNG und vor allem SVG die bevorzugten Formate. Die gängigste Standardgröße liegt bei 16×16 oder 32×32 Pixeln für Browser-Tabs, wobei für unterschiedliche Einsatzzwecke – etwa Apple Touch Icons oder Android-Homescreen-Icons – auch größere Varianten (180×180 oder 512×512 Pixel) benötigt werden.

Warum das Favicon für dein Webprojekt unverzichtbar ist

Auf den ersten Blick mag ein 16×16 Pixel großes Bild wie eine Nebensächlichkeit wirken. In der Praxis erfüllt es jedoch mehrere zentrale Funktionen, die du nicht unterschätzen solltest.

Wiedererkennung und Branding

Wenn ein Nutzer mehrere Tabs gleichzeitig geöffnet hat, ist das Favicon oft das einzige visuelle Element, das deine Website identifizierbar macht. Ein markantes Icon sorgt dafür, dass Besucher deinen Tab sofort wiederfinden. Gleiches gilt für Lesezeichen: Ohne Favicon erscheint dort ein generisches Platzhalter-Symbol, das deine Seite austauschbar wirken lässt.

Vertrauen und Professionalität

Ein fehlendes Favicon ist ein subtiles Signal für mangelnde Sorgfalt. Gerade wenn du als Freelancer, kleine Agentur oder Selbstständiger Kunden über deine Website gewinnen willst, zählt jedes Detail. Ein sauber eingebundenes Favicon vermittelt, dass du dein Webprojekt ernst nimmst – vom Code bis zur visuellen Identität.

Sichtbarkeit in den Google-Suchergebnissen

Seit 2019 zeigt Google auf mobilen Geräten das Favicon direkt neben der URL in den Suchergebnissen an. Inzwischen ist diese Darstellung auch auf dem Desktop Standard. Ein gut gestaltetes Favicon hebt dein Suchergebnis visuell von der Konkurrenz ab und kann die Klickrate positiv beeinflussen. Fehlt ein Favicon, zeigt Google ein generisches Weltkugel-Icon an – ein klarer Nachteil gegenüber Mitbewerbern, die ihr Branding bis ins Detail durchdacht haben.

Favicon erstellen: Formate, Größen und Best Practices

Die technische Umsetzung eines Favicons ist nicht kompliziert, aber es gibt einige Punkte, die du beachten solltest, damit es überall korrekt dargestellt wird.

Die richtigen Formate und Größen

Für maximale Kompatibilität empfiehlt es sich, mehrere Varianten bereitzustellen. Die folgende Übersicht zeigt die wichtigsten Formate und ihre Einsatzzwecke:

Besonders interessant ist das SVG-Format: Es ist verlustfrei skalierbar und erlaubt über die CSS-Media-Query prefers-color-scheme eine automatische Anpassung an den Dark Mode des Betriebssystems. Wenn dein Logo als Vektorgrafik vorliegt, solltest du diese Option unbedingt nutzen.

Einbindung im HTML-Header

Die Referenzierung erfolgt im head-Bereich deiner HTML-Dokumente. Ein typisches Setup für die verschiedenen Varianten sieht so aus: Du platzierst einen link-Tag mit rel="icon" und dem Verweis auf die jeweilige Datei. Für Apple-Geräte kommt ein separates link-Tag mit rel="apple-touch-icon" zum Einsatz. Zusätzlich kannst du über ein Web App Manifest (manifest.json) die Icons für Progressive Web Apps definieren.

Wenn du ein CMS wie WordPress nutzt, kannst du das Favicon in der Regel direkt über den Customizer unter „Website-Informationen" hochladen. Das CMS generiert dann automatisch die verschiedenen Größenvarianten und fügt die nötigen HTML-Tags ein.

Gestaltungstipps für maximale Wirkung

Bei so wenig Pixeln zählt jedes Detail. Verwende eine stark vereinfachte Version deines Logos oder ein einzelnes, markantes Zeichen daraus. Text ist bei 16×16 Pixeln praktisch unlesbar – ein einzelner Buchstabe oder ein abstraktes Symbol funktioniert deutlich besser. Achte auf ausreichend Kontrast, damit das Icon sowohl auf hellen als auch auf dunklen Hintergründen erkennbar bleibt. Teste das Ergebnis in verschiedenen Browsern und auf unterschiedlichen Geräten, bevor du es live schaltest.

Häufige Fehler beim Favicon und wie du sie vermeidest

In der Praxis begegnen dir immer wieder dieselben Probleme. Der klassische Fehler: Die favicon.ico-Datei liegt nicht im Root-Verzeichnis der Domain. Viele Browser suchen automatisch unter domain.de/favicon.ico, auch wenn kein expliziter Link im HTML gesetzt ist. Fehlt die Datei dort, entsteht ein 404-Fehler, der in deinen Server-Logs unnötig Rauschen erzeugt.

Ein weiteres häufiges Problem ist das Caching. Browser speichern Favicons besonders aggressiv. Wenn du dein Favicon aktualisierst, kann es Tage oder sogar Wochen dauern, bis die neue Version bei allen Nutzern ankommt. Ein bewährter Trick ist Cache-Busting über einen Query-String-Parameter an der Favicon-URL, beispielsweise ?v=2. Alternativ änderst du den Dateinamen.

Auch die Dateigröße verdient Aufmerksamkeit. Ein Favicon sollte wenige Kilobyte groß sein. Übergroße Bilddateien bremsen den initialen Seitenaufbau nicht spürbar, erzeugen aber unnötigen Traffic – insbesondere wenn deine Website hohe Besucherzahlen hat.

Favicon und SEO: Was Google erwartet

Google hat eigene Richtlinien für die Darstellung von Favicons in den Suchergebnissen veröffentlicht. Das Icon muss ein Vielfaches von 48×48 Pixeln groß sein (also mindestens 48×48), darf keine anstößigen Inhalte zeigen und muss die Marke oder Website visuell repräsentieren. Transparente Hintergründe sind erlaubt, Google setzt aber bei Bedarf einen eigenen Hintergrund ein.

Technisch muss das Favicon für den Googlebot crawlbar sein – eine Blockierung über robots.txt ist ein Fehler, der überraschend häufig vorkommt. Prüfe über die Google Search Console, ob dein Favicon korrekt erkannt wird. Unter dem Bericht „Darstellung in der Suche" findest du entsprechende Hinweise, wenn Probleme vorliegen.

Auch wenn das Favicon kein direkter Rankingfaktor ist, beeinflusst es die Click-Through-Rate in den Suchergebnissen. Und eine bessere CTR kann sich indirekt positiv auf deine Rankings auswirken – ein Aspekt, den du im Rahmen deiner SEO-Strategie nicht vernachlässigen solltest.

Von der Domain bis zum fertigen Webauftritt: So setzt du es um

Ein Favicon ist nur ein kleiner Baustein eines professionellen Webauftritts – aber ein symptomatischer. Wenn du dein Webprojekt von Grund auf richtig aufsetzen willst, beginnt alles mit der passenden Domain. Über checkdomain findest du die richtige Domain-Endung für dein Projekt und kannst sie in wenigen Minuten registrieren.

Damit dein Favicon und alle anderen Assets zuverlässig ausgeliefert werden, brauchst du ein solides Webhosting. Die Hosting-Pakete von checkdomain bieten dir die nötige Performance und Konfigurierbarkeit, um deine Website technisch sauber zu betreiben – inklusive SSL-Zertifikat, das für die Darstellung des Favicons in der Browser-Adressleiste ebenfalls relevant ist.

Wenn du deinen Webauftritt ohne eigenes Coding umsetzen möchtest, unterstützt dich checkdomain auch bei der Website-Erstellung. So erhältst du eine professionelle Seite, bei der Details wie Favicon-Einbindung, Meta-Tags und responsives Design von Anfang an berücksichtigt werden.

Für die langfristige Sichtbarkeit deiner Website lohnt sich ein Blick auf die SEO-Dienstleistungen von checkdomain. Von der technischen Optimierung – zu der auch eine saubere Favicon-Implementierung gehört – bis hin zur Content-Strategie bekommst du Unterstützung, die messbare Ergebnisse liefert. Ergänzend dazu helfen dir die SEA-Dienstleistungen, gezielt bezahlten Traffic auf dein Angebot zu lenken.

Und nicht zuletzt rundet eine professionelle E-Mail-Adresse passend zu deiner Domain das Gesamtbild ab. Denn wie beim Favicon gilt auch hier: Kleine Details entscheiden darüber, ob dein Auftritt Vertrauen schafft oder nicht.