FaviconHTMLSEOWebdesignPWA

Favicon richtig einrichten: alle Formate und Größen

8 Min. Lesezeit

Das Favicon ist das kleine Symbol, das im Browser-Tab, in den Lesezeichen und im Verlauf neben dem Seitentitel erscheint. Es wirkt unscheinbar, ist aber ein wichtiger Teil der visuellen Identität einer Website: Wer mehrere Tabs offen hat, erkennt eine Seite oft schneller am Icon als am abgeschnittenen Titeltext. Lange Zeit reichte eine einzige favicon.ico im Stammverzeichnis. Heute erwarten Browser, Smartphones und Progressive Web Apps jedoch eine ganze Familie von Icon-Dateien in unterschiedlichen Formaten und Auflösungen. Dieser Ratgeber zeigt Schritt für Schritt, welche Dateien du wirklich brauchst, wie du sie korrekt einbindest und welche Fehler häufig dazu führen, dass am Ende doch kein Symbol erscheint.

Warum ein einzelnes Icon heute nicht mehr genügt

Früher lieferte der Browser automatisch das Icon aus, sobald eine favicon.ico im Wurzelverzeichnis lag. Diese Datei funktioniert weiterhin und ist als Fallback sinnvoll, aber sie hat Grenzen. Das ICO-Format ist pixelbasiert und skaliert auf hochauflösenden Displays nicht ideal. Außerdem nutzen verschiedene Plattformen das Icon in völlig unterschiedlichen Kontexten: ein winziges 16-Pixel-Symbol im Tab, ein größeres Lesezeichen-Icon, eine App-Kachel auf dem iPhone-Startbildschirm oder das runde Symbol einer installierten Web-App auf Android. Jeder dieser Fälle verlangt eine andere Größe oder ein anderes Format.

Eine moderne, robuste Lösung kombiniert deshalb mehrere Bausteine:

Das klassische favicon.ico und moderne PNG-Varianten

Die favicon.ico gehört nach wie vor ins Stammverzeichnis deiner Domain. Browser fragen diesen Pfad oft automatisch ab, auch ohne expliziten Link im HTML. Eine ICO-Datei kann mehrere Auflösungen enthalten; üblich sind 16×16 und 32×32 Pixel. Ergänzend lohnt sich mindestens ein PNG mit 32×32 Pixeln, das du gezielt im <head> verlinkst. PNG ist verlustfrei, unterstützt Transparenz und wird von allen Browsern verstanden.

Für die meisten Projekte reicht diese Kombination im Kopfbereich:

Achte darauf, dass das Motiv auch bei 16 Pixeln noch erkennbar bleibt. Feine Linien, langer Text oder zu viele Farben verschwimmen in der Miniatur. Ein reduziertes Symbol, oft ein Buchstabe oder eine markante Form, funktioniert hier deutlich besser als ein verkleinertes Detailbild.

SVG-Favicon für scharfe Darstellung

Das SVG-Favicon ist die modernste Variante und wird von praktisch allen aktuellen Browsern unterstützt. Da es vektorbasiert ist, bleibt es in jeder Größe gestochen scharf, egal ob auf einem hochauflösenden Laptop-Display oder im Tab. Eingebunden wird es so:

Browser, die SVG verstehen, bevorzugen diese Datei automatisch; ältere Programme greifen auf die PNG- oder ICO-Variante zurück. So deckst du mit wenigen Zeilen sowohl moderne als auch ältere Umgebungen ab. Halte die SVG-Datei schlank: Eingebettete Schriftarten, Filter oder externe Verweise können Probleme verursachen. Ein klares Pfad-Motiv mit wenigen Farben ist die sicherste Wahl.

Dark- und Light-Varianten

Tab-Leisten erscheinen je nach Systemeinstellung hell oder dunkel. Ein Icon, das auf weißem Hintergrund gut aussieht, kann auf dunklem Untergrund untergehen, und umgekehrt. Bei SVG-Favicons lässt sich das elegant lösen, indem du eine Media Query direkt in die SVG-Datei einbettest. Über @media (prefers-color-scheme: dark) kannst du etwa die Füllfarbe eines Pfades umschalten, sodass das Symbol sich an das Farbschema anpasst.

Wer keine SVG-Lösung nutzt, sollte als Kompromiss eine Variante wählen, die auf beiden Hintergründen funktioniert, zum Beispiel ein Symbol mit Kontur oder einem dezent gefüllten Hintergrundkreis. So bleibt das Icon in jeder Tab-Farbe erkennbar.

apple-touch-icon für iOS

Speichert ein Nutzer deine Seite auf dem iPhone- oder iPad-Startbildschirm, verwendet iOS nicht das normale Favicon, sondern ein eigenes Icon: das Apple-Touch-Icon. Üblich ist eine Größe von 180×180 Pixeln als PNG. iOS ergänzt automatisch abgerundete Ecken, du lieferst also ein quadratisches Bild mit deckendem Hintergrund, ohne Transparenz, weil transparente Bereiche dort schwarz erscheinen können.

Eine einzelne 180-Pixel-Datei genügt heute in den meisten Fällen, da iOS sie bei Bedarf herunterskaliert. Plane für dieses Icon einen kleinen Sicherheitsrand ein, damit das Motiv nach dem Beschneiden der Ecken nicht angeschnitten wirkt.

Web-App-Manifest für Android und PWAs

Auf Android und bei Progressive Web Apps steuert das Web-App-Manifest, welche Icons verwendet werden. Das Manifest ist eine JSON-Datei, die du im <head> verlinkst:

Im Manifest hinterlegst du unter dem Schlüssel icons mindestens zwei PNG-Dateien mit 192×192 und 512×512 Pixeln. Diese Größen decken die Symbole auf dem Homescreen und den Splashscreen einer installierten Web-App ab. Über die Eigenschaft purpose mit dem Wert maskable kannst du ein zusätzliches Icon angeben, das Android in verschiedene Formen wie Kreise oder abgerundete Quadrate einpassen darf. Bei maskbaren Icons sollte das Hauptmotiv mit ausreichend Rand zentriert sein, damit nichts abgeschnitten wird.

Übersicht: welche Datei wofür

Die folgende Tabelle fasst die wichtigsten Dateien mit Format, Größe, Einsatzzweck und dem nötigen HTML-Verweis zusammen. So siehst du auf einen Blick, was du anlegen und verlinken musst.

Datei Format Größe (px) Einsatzzweck HTML-Link bzw. Einbindung
favicon.ico ICO 16, 32 Universeller Fallback im Tab und in Lesezeichen <link rel="icon" href="/favicon.ico" sizes="32x32">
favicon.svg SVG skalierbar Scharfes Tab-Icon auf allen Displays, Dark-/Light-fähig <link rel="icon" type="image/svg+xml" href="/favicon.svg">
favicon-32.png PNG 32×32 PNG-Fallback für Browser ohne SVG <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
apple-touch-icon.png PNG 180×180 Icon auf dem iOS-Startbildschirm <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
icon-192.png PNG 192×192 Android-Homescreen, im Manifest referenziert Eintrag im site.webmanifest
icon-512.png PNG 512×512 PWA-Splashscreen und große Kacheln Eintrag im site.webmanifest
site.webmanifest JSON — Bündelt Icons, Name und Farben für PWAs <link rel="manifest" href="/site.webmanifest">

Häufige Fehler und wie du sie vermeidest

Wenn das Favicon trotz korrekter Dateien nicht erscheint, liegt es meist an einer der folgenden Ursachen. Diese Punkte solltest du systematisch durchgehen:

  1. Falscher Pfad: Relative Pfade wie favicon.svg ohne führenden Schrägstrich können auf Unterseiten ins Leere zeigen. Verwende absolute Pfade ab dem Wurzelverzeichnis, etwa /favicon.svg.
  2. Aggressives Caching: Browser merken sich Favicons besonders hartnäckig. Nach einer Änderung hilft ein erzwungener Neuladen, das Leeren des Caches oder ein Versionsparameter wie /favicon.svg?v=2 hinter der URL.
  3. Zu kleine oder zu detailreiche Icons: Ein bei 512 Pixeln gestaltetes Logo wirkt bei 16 Pixeln oft als Farbbrei. Teste das Motiv ausdrücklich in der kleinsten Größe.
  4. Transparenz beim Apple-Touch-Icon: Durchsichtige Flächen können auf iOS schwarz dargestellt werden. Verwende einen deckenden Hintergrund.
  5. Falscher MIME-Typ: Liefert der Server SVG nicht als image/svg+xml aus, ignorieren manche Browser die Datei. Prüfe die Server-Konfiguration.

Wenn du Bilddateien in verschiedene Größen umrechnen oder Formate prüfen möchtest, findest du passende Helfer in unserer Sammlung kostenloser Webtools. Weitere praxisnahe Beiträge rund um Webentwicklung und SEO gibt es im News-Bereich, und einen Überblick über alle Angebote bietet die Startseite.

Empfohlene Mindest-Konfiguration

Du musst nicht jede denkbare Größe anlegen. Für nahezu alle Projekte reicht ein überschaubares Set: eine favicon.ico, ein favicon.svg, ein PNG mit 32 Pixeln, ein Apple-Touch-Icon mit 180 Pixeln sowie die beiden Manifest-Icons mit 192 und 512 Pixeln. Diese sechs Dateien decken Browser-Tabs, Lesezeichen, iOS-Homescreen und installierbare Web-Apps zuverlässig ab, ohne dass dein Projekt mit Dutzenden kaum genutzter Varianten überladen wird.

Häufige Fragen

Brauche ich heute noch eine favicon.ico?

Ja, als Fallback ist sie weiterhin sinnvoll. Manche Browser und Dienste fragen den Pfad /favicon.ico automatisch ab, auch ohne expliziten Link im HTML. In Kombination mit einem SVG- und einem PNG-Favicon stellt sie sicher, dass auch ältere Umgebungen ein Symbol anzeigen.

Welche Favicon-Größe ist die wichtigste?

Im Tab werden meist 16 oder 32 Pixel angezeigt, daher sollte das Motiv vor allem in diesen kleinen Größen funktionieren. Für den iOS-Startbildschirm sind 180 Pixel maßgeblich, für Android und PWAs 192 und 512 Pixel. Mit einem SVG deckst du den Tab-Bereich in jeder Auflösung gleichzeitig ab.

Warum erscheint mein neues Favicon nicht?

In den allermeisten Fällen ist das Browser-Caching schuld. Erzwinge ein hartes Neuladen, leere den Cache oder hänge einen Versionsparameter wie ?v=2 an die Icon-URL. Prüfe außerdem, ob der Pfad absolut ist und der Server das richtige Format ausliefert.

Kann ein Favicon auf Dark Mode reagieren?

Mit einem SVG-Favicon ja. Du kannst innerhalb der SVG-Datei eine Media Query mit prefers-color-scheme einbauen, um die Farben je nach hellem oder dunklem Tab-Hintergrund umzuschalten. PNG- und ICO-Dateien sind statisch und passen sich nicht automatisch an.

Was ist ein maskbares Icon im Web-App-Manifest?

Ein maskbares Icon ist eine Variante mit der Eigenschaft purpose: "maskable", die Android in verschiedene Formen wie Kreise oder abgerundete Quadrate einpassen darf. Damit nichts abgeschnitten wird, sollte das Hauptmotiv zentriert mit ausreichend Rand gestaltet sein.

Wie viele Favicon-Dateien sind sinnvoll?

Für die meisten Websites genügen sechs: favicon.ico, favicon.svg, ein 32-Pixel-PNG, ein 180-Pixel-Apple-Touch-Icon sowie 192- und 512-Pixel-Icons für das Manifest. Mehr Varianten bringen selten zusätzlichen Nutzen und erhöhen nur den Pflegeaufwand.