Favicon einfach erklärt: Was es ist, warum es wichtig ist und wie du es einrichtest

Das kleine Symbol im Browser-Tab gehört zu den Details, die auf den ersten Blick nebensächlich wirken, aber einen messbaren Einfluss auf Wiedererkennungswert, Usability und sogar SEO haben. Favicons begegnen dir täglich, ob in der Lesezeichenleiste, in den Suchergebnissen oder auf dem Homescreen deines Smartphones. In diesem Beitrag erfährst du, was ein Favicon technisch ist, welche Formate und Größen relevant sind und wie du es für deine Website korrekt implementierst.

Was ist ein Favicon?

Ein Favicon, zusammengesetzt aus Favorite und Icon, ist ein kleines Bildsymbol, das deiner Website zugeordnet wird. Es erscheint in der Browser-Tab-Leiste, in der Adresszeile, in Lesezeichen-Listen, im Verlauf und bei modernen Browsern auch in den Suchergebnisseiten von Google. Auf mobilen Geräten wird das Favicon angezeigt, wenn Nutzer deine Seite als Verknüpfung auf dem Homescreen ablegen.

Historisch wurde das Favicon als einzelne ICO-Datei mit 16 mal 16 Pixeln im Stammverzeichnis einer Website abgelegt. Moderne Browser und Betriebssysteme erwarten heute deutlich mehr: Verschiedene Auflösungen, unterschiedliche Formate und spezifische Meta-Tags sorgen dafür, dass dein Symbol auf jeder Plattform scharf und korrekt dargestellt wird.

Warum ein Favicon mehr als eine Spielerei ist

Wiedererkennungswert und Branding

Wenn ein Nutzer dutzende Tabs gleichzeitig geöffnet hat, ist das Favicon oft der einzige visuelle Anhaltspunkt, um deine Seite schnell wiederzufinden. Ohne eigenes Favicon zeigt der Browser ein generisches Symbol an, meist ein leeres Dokumenten-Icon oder das Standard-Symbol des jeweiligen Browsers. Damit verschenkst du eine der wenigen Möglichkeiten, deine Marke permanent im Sichtfeld des Nutzers zu platzieren.

Vertrauen und Professionalität

Ein fehlendes Favicon signalisiert Nachlässigkeit. Nutzer nehmen unbewusst wahr, ob eine Website technisch sauber aufgesetzt ist. Ein individuelles, scharfes Favicon vermittelt, dass du dich um Details kümmerst, was sich positiv auf die wahrgenommene Seriosität deines Webauftritts auswirkt.

SEO und Google-Suchergebnisse

Google zeigt in den mobilen Suchergebnissen das Favicon neben der URL und dem Seitentitel an. Eine Seite ohne Favicon oder mit einem unscharfen, pixeligen Symbol fällt im Vergleich zu Wettbewerbern mit professionellem Icon negativ auf. Zwar ist das Favicon kein direkter Ranking-Faktor, aber die Klickrate in den SERPs kann davon profitieren, wenn dein Ergebnis visuell ansprechender wirkt als die Konkurrenz. In Kombination mit einer durchdachten SEO-Strategie zahlt jedes Detail auf deine Sichtbarkeit ein.

Technische Grundlagen: Formate und Größen

Die Anforderungen an Favicons sind mit der Vielfalt an Endgeräten und Betriebssystemen gewachsen. Ein einzelnes 16x16-ICO-File reicht heute nicht mehr aus, wenn du alle relevanten Kontexte abdecken willst.

Relevante Formate im Überblick

Empfohlene Größen

Für eine vollständige Abdeckung solltest du mindestens die folgenden Größen bereitstellen:

• 16x16 Pixel: Browser-Tab (Standard)
• 32x32 Pixel: Browser-Tab auf hochauflösenden Displays, Taskleisten-Icon unter Windows
• 48x48 Pixel: Windows-Desktopverknüpfung
• 180x180 Pixel: Apple Touch Icon für iOS-Geräte
• 192x192 Pixel: Android-Homescreen und PWA
• 512x512 Pixel: PWA-Splash-Screens und größere Darstellungen

Wenn du ein SVG-Favicon einsetzt, deckt dieses theoretisch alle Größen ab, allerdings empfiehlt es sich, zusätzlich PNG-Fallbacks bereitzustellen, um maximale Kompatibilität zu gewährleisten.

So erstellst du ein gutes Favicon

Gestaltungsprinzipien

Ein Favicon wird extrem klein dargestellt. Das bedeutet: Feine Details, dünne Linien und kleine Schriftzüge sind bei 16x16 Pixeln nicht mehr erkennbar. Reduziere dein Logo oder Markenzeichen auf die einfachste, markanteste Form. Ein einzelner Buchstabe, ein abstrahiertes Symbol oder ein prägnantes Farbelement funktionieren in der Regel besser als ein verkleinertes Komplettlogo.

Achte auf ausreichenden Kontrast. Das Favicon muss sowohl auf hellem als auch auf dunklem Hintergrund erkennbar sein, da Browser-Themes und Betriebssystem-Einstellungen den Hintergrund beeinflussen. Teste dein Favicon explizit im Dark Mode.

Werkzeuge zur Erstellung

Professionelle Grafikprogramme wie Adobe Illustrator, Figma oder Affinity Designer eignen sich ideal, um ein Favicon zunächst als Vektorgrafik anzulegen und dann in die benötigten Pixelgrößen zu exportieren. Für den schnellen Einstieg gibt es Online-Generatoren wie RealFaviconGenerator, die aus einem hochgeladenen Bild alle gängigen Formate und Größen erzeugen und den passenden HTML-Code generieren.

Wenn du deinen Webauftritt mit einem Homepage-Baukasten erstellst, ist die Favicon-Integration in der Regel direkt in den Einstellungen vorgesehen. Du lädst dort ein Bild hoch und das System kümmert sich um die korrekte Einbindung.

Favicon einbinden: Der technische Weg

Klassische Einbindung über HTML

Die Einbindung erfolgt im Head-Bereich deiner HTML-Seite über Link-Tags. Eine solide Grundkonfiguration sieht folgendermaßen aus:

Zunächst referenzierst du die favicon.ico-Datei im Stammverzeichnis deiner Domain. Viele Browser suchen automatisch nach einer Datei unter /favicon.ico, selbst wenn kein Link-Tag vorhanden ist. Trotzdem empfiehlt es sich, den Pfad explizit anzugeben.

Für das PNG-Format bindest du verschiedene Größen ein, jeweils mit dem Attribut rel="icon", dem Typ image/png und dem passenden sizes-Attribut, beispielsweise sizes="32x32" oder sizes="16x16". Für das Apple Touch Icon verwendest du rel="apple-touch-icon" mit der Größenangabe 180x180. Falls du ein SVG-Favicon einsetzen möchtest, nutzt du rel="icon" mit dem Typ image/svg+xml.

Web App Manifest für Android und PWAs

Für Android-Geräte und Progressive Web Apps legst du eine Datei namens site.webmanifest an, in der du Icons mit 192x192 und 512x512 Pixeln referenzierst. Diese Datei verlinkst du ebenfalls im Head-Bereich deiner Seite. Das Manifest enthält außerdem Angaben wie den Namen deiner App und die Hintergrundfarbe, die beim Laden der PWA angezeigt wird.

WordPress und Content-Management-Systeme

In WordPress kannst du das Favicon über den Customizer festlegen, unter dem Punkt Website-Informationen und Website-Icon. WordPress generiert daraus automatisch verschiedene Größen. Allerdings erstellt WordPress standardmäßig kein ICO-Format und kein SVG-Favicon. Wenn du maximale Kontrolle über alle Formate haben möchtest, lohnt es sich, die Favicon-Dateien manuell im Theme-Header oder über ein Plugin einzubinden.

Wer WordPress-Hosting nutzt, profitiert von einer optimierten Serverumgebung, die schnelle Ladezeiten der gesamten Seite einschließlich aller statischen Assets wie Favicons sicherstellt.

Häufige Fehler bei der Favicon-Implementierung

Nur ein Format bereitstellen

Wer ausschließlich eine favicon.ico-Datei ablegt, verpasst die optimale Darstellung auf mobilen Geräten, in PWAs und in den Google-Suchergebnissen. Google bevorzugt explizit PNG- oder SVG-Favicons und ignoriert ICO-Dateien in bestimmten Kontexten.

Falsche Dateigröße oder -auflösung

Ein zu großes Bild, das der Browser herunterskalieren muss, kann zu unscharfer Darstellung führen. Umgekehrt wirkt ein zu kleines Bild bei Vergrößerung pixelig. Stelle immer die exakt benötigten Größen bereit, anstatt dich auf die Skalierung des Browsers zu verlassen.

Caching-Probleme nach Aktualisierung

Browser cachen Favicons aggressiv, teilweise über Wochen hinweg. Wenn du dein Favicon aktualisierst, kann es sein, dass Besucher noch lange das alte Symbol sehen. Ein bewährter Trick ist, den Dateinamen zu ändern oder einen Query-Parameter an die URL anzuhängen, also beispielsweise favicon.png?v=2. Damit erzwingst du, dass der Browser die neue Version lädt.

Transparenz bei Apple Touch Icons

iOS füllt transparente Bereiche bei Touch Icons mit Schwarz auf. Verwende für das Apple Touch Icon daher immer einen expliziten, nicht-transparenten Hintergrund, der zu deinem Branding passt.

Favicon und Google: Was du beachten musst

Google hat spezifische Richtlinien für die Darstellung von Favicons in den Suchergebnissen. Das Bild sollte mindestens 48x48 Pixel groß sein, wobei ein Vielfaches davon empfohlen wird. Google skaliert das Icon automatisch auf 16x16 Pixel herunter, weshalb es in dieser Größe scharf erkennbar bleiben muss. Außerdem darf das Favicon nicht anstößig sein und muss repräsentativ für die gesamte Website stehen.

Google indexiert das Favicon über den Googlebot. Wenn du die favicon-Datei per robots.txt blockierst, kann Google das Icon nicht crawlen und es erscheint nicht in den Suchergebnissen. Stelle also sicher, dass deine Favicon-Dateien crawlbar sind.

In Kombination mit professionellen SEO-Dienstleistungen lässt sich die Darstellung deiner Seite in den SERPs ganzheitlich optimieren, vom Favicon über strukturierte Daten bis hin zu Meta-Beschreibungen und Seitentiteln.

Favicon als Teil einer professionellen Web-Präsenz

Ein sauber eingerichtetes Favicon ist ein kleiner, aber sichtbarer Baustein eines professionellen Webauftritts. Es funktioniert am besten im Zusammenspiel mit einer durchdachten Domain-Wahl, schnellem Webhosting und einer technisch sauberen Website-Struktur.

Wenn du eine neue Website planst oder deinen bestehenden Auftritt technisch auf den neuesten Stand bringen willst, bietet dogado alle notwendigen Bausteine aus einer Hand. Mit einer passenden Domain schaffst du die Grundlage für deine Online-Identität. Performantes Webhosting oder ein leistungsfähiger VPS stellen sicher, dass deine Seite zuverlässig und schnell ausgeliefert wird. Für WordPress-Projekte steht spezialisiertes WordPress Hosting bereit, das auf die Anforderungen dieses CMS zugeschnitten ist. Und wer zusätzlich professionelle E-Mail-Adressen unter der eigenen Domain betreiben möchte, findet dafür ebenfalls die passende Lösung.

Mit einer Website-Erstellung durch dogado oder dem Einsatz des Homepage-Baukastens ist die korrekte Favicon-Einbindung von Anfang an Teil des Prozesses, damit du dich auf das konzentrieren kannst, was zählt: dein Geschäft.