Zusammenfassung: Favicons erscheinen in Browser-Tabs, Lesezeichen, mobilen Startbildschirmen und Google-Suchergebnissen. Ein einziges 512×512-Quellbild kann in Sekunden alle benötigten Größen erzeugen.

Ein Favicon ist das kleine Symbol, das Ihre Website auf jeder Plattform und jedem Gerät repräsentiert. Es erscheint in Browser-Tabs, Lesezeichenlisten, Verlaufsmenüs, Progressive-Web-App-Launchern und seit 2019 direkt in den mobilen Google-Suchergebnissen neben Ihrem Seitenamen. Trotz seiner geringen Größe spielt das Favicon eine überproportionale Rolle bei der Markenwahrnehmung und dem Nutzervertrauen.

Die Google-Dokumentation bestätigt, dass Websites ein gültiges Favicon besitzen müssen, um eines in den Suchergebnissen anzuzeigen. Seiten ohne Favicon zeigen ein generisches Weltkugel-Symbol, was die visuelle Unterscheidbarkeit verringert und die Klickraten im Vergleich zu gebrandeten Konkurrenten senken kann. Ein Google Search Central Leitfaden beschreibt die genauen Anforderungen: Die Datei muss ein Vielfaches von 48 Pixeln sein, quadratisch und für Googlebot zugänglich.

Warum Favicons für SEO und Branding wichtig sind

Wenn Nutzer Google-Suchergebnisse auf dem Mobilgerät durchsehen, ist das Favicon eines der ersten visuellen Elemente, die sie bemerken. Ein klares, wiedererkennbares Symbol schafft sofortige Markenassoziation und kann die Klickrate verbessern, indem Ihr Eintrag gegenüber Konkurrenten mit Standard-Icons hervorsticht.

Über die Suche hinaus dienen Favicons als dauerhafte Markenkontaktpunkte. Jeder geöffnete Browser-Tab zeigt Ihr Symbol. Jeder Lesezeicheneintrag zeigt es. Wenn ein Nutzer Ihre Website zum Startbildschirm seines Telefons hinzufügt, wird das Apple-Touch-Icon oder Android-Chrome-Icon zu Ihrer app-ähnlichen Darstellung. Websites, die diese Assets vernachlässigen, wirken unfertig und unprofessionell.

Progressive Web Apps (PWAs) sind vollständig auf korrekt konfigurierte Favicons angewiesen. Das Web-App-Manifest referenziert Icon-Dateien in mehreren Auflösungen. Ohne sie erscheint möglicherweise keine Installationsaufforderung und die PWA wird auf dem Startbildschirm nicht korrekt angezeigt.

Alle Favicon-Größen, die Sie benötigen

Eine vollständige Favicon-Implementierung deckt vier Hauptkontexte ab, die jeweils spezifische Dateigrößen erfordern:

Browser-Favicons verwenden ICO- oder PNG-Dateien mit 16×16 und 32×32 Pixeln. Sie erscheinen in Tabs, Adressleisten und Lesezeichenmenüs. Die 32×32-Version wird auch für Windows-Taskleistenverknüpfungen verwendet.

Apple-Touch-Icons erfordern ein PNG mit 180×180 Pixeln. iOS verwendet dieses, wenn Nutzer Ihre Website zum Startbildschirm hinzufügen. Ohne es erstellt Safari stattdessen einen Screenshot Ihrer Seite — was selten gut aussieht.

Android-Chrome-Icons benötigen PNGs mit 192×192 und 512×512 Pixeln, die im Web-App-Manifest referenziert werden. Sie ermöglichen PWA-Installationen und die Funktion Zum Startbildschirm hinzufügen. Die 512×512-Version wird auch für Splash-Screens verwendet.

Windows-Kacheln verwenden ein PNG mit 150×150 Pixeln für die Microsoft-Startmenü-Kachel und andere Windows-Integrationen. Eine optionale browserconfig.xml-Datei ermöglicht die Anpassung der Kachelfarbe.

Unser kostenloser Favicon-Generator erzeugt alle diese Größen aus einem einzigen Quellbild. Einmal hochladen, ein vollständiges Paket mit allen Formaten herunterladen.

So erstellen Sie das perfekte Quellbild

Beginnen Sie mit einem quadratischen Bild von 512×512 Pixeln oder größer. Das SVG-Format ist ideal, da es ohne Qualitätsverlust skaliert, aber ein hochauflösendes PNG funktioniert ebenso gut.

Einfachheit ist entscheidend. Favicons werden in extrem kleinen Größen angezeigt, sodass feine Details verschwinden. Die wirksamsten Favicons verwenden kräftige Formen, hohen Kontrast und minimale Elemente. Denken Sie an den Twitter-Vogel, die GitHub-Katze oder den YouTube-Play-Button — alle sind bei 16 Pixeln sofort erkennbar.

Vermeiden Sie Fotos oder vollständige Logos mit Text. Buchstaben funktionieren nur als einzelne Zeichen in einer fetten Schriftart. Viele Marken verwenden nur ihren Anfangsbuchstaben oder eine vereinfachte Version ihres Logos.

Verwenden Sie transparente Hintergründe für PNG-Favicons. Dies stellt sicher, dass das Symbol in jedem Browser-Theme sauber aussieht, ob hell oder dunkel. Das ICO-Format kann mehrere Größen in einer Datei enthalten und ist damit ein zuverlässiger Fallback für ältere Browser.

Favicons mit korrektem HTML implementieren

Nach dem Generieren Ihrer Favicon-Dateien benötigen Sie die korrekten HTML-Tags im <head>-Bereich Ihrer Seite. Die wesentlichen Tags sind:

Das <link rel="icon">-Tag verweist auf Ihr Haupt-Favicon. Moderne Browser unterstützen PNG direkt: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.

Das <link rel="apple-touch-icon">-Tag gibt das iOS-Startbildschirm-Icon an. Apple-Geräte suchen nach genau diesem Beziehungsattribut. Setzen Sie das sizes-Attribut auf 180x180 für beste Ergebnisse.

Das <link rel="manifest">-Tag verbindet Ihr Web-App-Manifest, das die Android-Chrome-Icons mit ihren Größen und Zwecken auflistet. Dies ist essentiell für PWA-Unterstützung.

Für Windows-Kacheln stellt das <meta name="msapplication-TileImage">-Tag die Kachelgrafik bereit. Sie können auch <meta name="msapplication-TileColor"> setzen, um die Hintergrundfarbe der Kachel zu definieren.

Unser Generator liefert fertigen HTML-Code für alle diese Tags. Kopieren Sie einfach den Code-Block in den Head-Bereich Ihrer Website, laden Sie die generierten Dateien in Ihr Stammverzeichnis hoch, und jede Plattform ist abgedeckt.

Favicon-Best-Practices für 2026

Halten Sie Ihr Favicon konsistent mit Ihrer Markenidentität. Das Symbol sollte die gleichen Farben und die gleiche visuelle Sprache wie Ihr Logo und Ihr Website-Design verwenden. Konsistenz über alle Kontaktpunkte hinweg stärkt die Markenbekanntheit im Laufe der Zeit.

Testen Sie Ihr Favicon auf mehreren Browsern und Geräten. Chrome, Firefox, Safari und Edge rendern Favicons jeweils leicht unterschiedlich. Was auf einem Browser scharf aussieht, kann auf einem anderen unscharf erscheinen, wenn die falsche Größe ausgeliefert wird.

Verwenden Sie das SVG-Favicon-Format wo unterstützt. Moderne Browser akzeptieren SVG-Favicons über <link rel="icon" type="image/svg+xml">. SVG skaliert perfekt auf jede Größe und unterstützt Dark-Mode-Media-Queries, sodass Sie Ihr Symbol an die Systemeinstellung des Nutzers anpassen können.

Invalidieren Sie den Cache bei Favicon-Updates. Browser cachen Favicons aggressiv. Nach einer Änderung fügen Sie eine Versions-Query-String hinzu oder ändern den Dateinamen, um Browser zum Abruf der neuen Version zu zwingen.

Schließlich sollten Sie immer einen ICO-Fallback unter /favicon.ico im Stammverzeichnis Ihrer Website bereitstellen. Einige Browser und Tools suchen nach wie vor diesen Standardpfad, unabhängig davon, was Ihr HTML angibt. Seine Präsenz stellt sicher, dass keine Plattform ohne Ihr Markensymbol bleibt.