Kontakt
Was interessiert Sie?
Favicon.
Ein Favicon ist das kleine Symbol, das eine Website im Browser-Tab, in Lesezeichen, auf dem Home-Bildschirm des Smartphones und in den mobilen Google-Suchergebnissen neben dem Seitennamen repräsentiert. Technisch ist es eine Bilddatei (ICO, PNG oder SVG), die im HTML-Kopf der Seite verlinkt wird.
Favicon — ausführlich erklärt
Der Name kommt von «Favorite Icon»: Ursprünglich erschien das Symbol nur in der Lesezeichenliste des Internet Explorers. Heute taucht es an deutlich mehr Stellen auf — im Browser-Tab, in der Verlaufsliste, als App-Symbol, wenn jemand die Website auf dem iPhone zum Home-Bildschirm hinzufügt, und auf dem Smartphone direkt neben dem Ergebnis in der Google-Suche. Damit ist das Favicon eines der wenigen Markenelemente, das jemand sieht, bevor er die Website überhaupt geöffnet hat.
Technisch besteht ein sauberes Favicon-Set heute aus wenigen Dateien: einer favicon.ico für ältere Browser und Werkzeuge, einer SVG- oder PNG-Version für moderne Browser, einem apple-touch-icon mit 180 × 180 Pixeln für iOS und Icons für das Web-App-Manifest (typischerweise 192 und 512 Pixel). Verlinkt werden sie im head-Bereich der Seite oder, bei Frameworks wie Next.js, über Konventionsdateien im App-Verzeichnis. Für die Google-Suche gilt laut Google-Dokumentation: Das Favicon muss quadratisch sein, eine Seitenlänge von einem Vielfachen von 48 Pixeln haben und für den Googlebot abrufbar sein.
Gestalterisch ist das Favicon eine eigene Aufgabe, keine verkleinerte Kopie des Logos. Eine Wort-Bild-Marke mit Firmenname und Claim wird auf 16 Pixeln zu einem grauen Fleck. Besser funktioniert ein reduziertes Zeichen: ein Buchstabe, eine Form oder das Bildzeichen des Logos, mit genügend Kontrast auf hellem und dunklem Hintergrund. Auf iOS kommt eine Besonderheit dazu: Das System rundet die Ecken selbst und füllt transparente Bereiche schwarz — App-Symbole für den Home-Bildschirm sollten deshalb randlos und ohne Transparenz angelegt werden.
Für die Wirkung zählt vor allem Konsistenz. Ein fehlendes Favicon zeigt im Tab ein generisches Weltkugel-Symbol und in der mobilen Suche einen Platzhalter — beides wirkt unfertig. Ein Favicon, das nicht zum übrigen Corporate Design passt, verschenkt Wiedererkennung genau dort, wo zwanzig Tabs nebeneinander offen sind. Der Aufwand ist klein, deshalb gehört es bei jedem Projekt zur Abnahme-Checkliste.
Welche Favicon-Dateien eine Website 2026 braucht
Ein schlankes, vollständiges Set umfasst: favicon.ico (32 × 32, für ältere Browser und Feed-Reader), icon.svg oder icon.png (für moderne Browser, SVG bleibt in jeder Grösse scharf), apple-touch-icon.png (180 × 180, ohne Transparenz) und zwei Manifest-Icons in 192 und 512 Pixeln, falls die Seite als installierbare Progressive Web App dienen soll. Mehr Varianten sind meist Ballast aus alten Generatoren.
Wichtig ist die Prüfung nach dem Livegang: Favicon im privaten Fenster laden, auf iPhone und Android zum Home-Bildschirm hinzufügen, und in der Google Search Console die Startseite neu prüfen lassen. Google aktualisiert das Favicon in den Suchergebnissen nicht sofort, sondern beim nächsten Crawl der Startseite.
Beispiel: Favicon für eine Schreinerei mit langem Firmennamen
Eine Schreinerei mit dem Logo «Muster Holzbau & Innenausbau AG» und einer gezeichneten Säge daneben lässt das Logo als Favicon hochladen. Auf 16 Pixeln ist nur noch ein brauner Balken zu sehen. Die Lösung: Das Favicon zeigt nur die Säge, flächig in der Markenfarbe, auf einem hellen Quadrat. Für den Home-Bildschirm entsteht eine randlose Variante mit Markenfarbe als Hintergrund. Der Firmenname steht ohnehin daneben — im Tab-Titel und im Suchergebnis.
Solche Details gehören bei uns zum Standard jeder neuen Website und werden im Website-Audit bei bestehenden Seiten mitgeprüft.
Weiterführende Seite
Website erstellen lassenIm Blog vertieft
Favicon: alle Grössen für WebsitesHäufige Fragen zu Favicon
Es gibt nicht die eine Grösse. Üblich sind 32 × 32 Pixel für favicon.ico, 180 × 180 für das apple-touch-icon und 192 sowie 512 Pixel für das Web-App-Manifest. Google verlangt für die Anzeige in der Suche ein quadratisches Bild mit einer Seitenlänge, die ein Vielfaches von 48 Pixeln ist. Eine SVG-Datei deckt moderne Browser in jeder Grösse ab.
Häufige Gründe: Die Datei ist nicht quadratisch oder zu klein, sie ist per robots.txt gesperrt, der Link im HTML-Kopf fehlt auf der Startseite, oder Google hat die Startseite seit der Änderung noch nicht neu gecrawlt. Ist alles korrekt, hilft eine erneute Indexierungsanfrage der Startseite in der Search Console.
Nur wenn es auf 16 bis 32 Pixeln noch lesbar ist. Bei Wort-Bild-Marken funktioniert fast immer nur das Bildzeichen oder ein Anfangsbuchstabe. Das Favicon ist eine eigene, reduzierte Ableitung des Logos.
Weitere Begriffe mit „F“
FCP (First Contentful Paint)
FCP misst, wie lange es dauert, bis der erste sichtbare Inhalt (Text, Bild, SVG) im Browser erschein...
First-Party Data
First-Party Data sind Daten, die ein Unternehmen direkt von seinen eigenen Kunden und Website-Besuch...
Funnel (Marketing Funnel)
Ein Marketing Funnel (Trichter) visualisiert die Customer Journey von der ersten Berührung bis zum K...
Bereit für Ihr Projekt?
Wenden Sie dieses Wissen auf Ihre Website an — DLM Digital hilft Ihnen dabei.
Favicon in der Praxis
Wie der Begriff im Alltag von Schweizer KMU auftaucht — vertieft in Artikeln aus dem DLM Magazin.