Was ist ein Favicon und warum brauchst du eins?

Ein Favicon ist das kleine Symbol, das im Browser-Tab neben dem Seitentitel erscheint. Es taucht auch in Lesezeichen, in der Verlaufsanzeige, auf dem Smartphone-Homescreen und in Google-Suchergebnissen auf. Ohne Favicon zeigt der Browser ein generisches Globus-Icon — und deine Seite sieht aus wie jede andere.

Das Favicon ist oft das erste visuelle Element deiner Marke, das ein Besucher sieht — noch bevor die eigentliche Seite geladen hat. Ein professionelles Favicon signalisiert: Hier hat sich jemand Mühe gegeben. Ein fehlendes Favicon signalisiert: Hier hat es niemand ernst genommen.

Für SEO ist das Favicon ebenfalls relevant: Google zeigt es seit einiger Zeit direkt in den mobilen Suchergebnissen neben deiner URL. Ein klares, erkennbares Favicon erhöht die Klickrate in den SERPs — weil es Vertrauen und Wiedererkennung schafft.

Welche Favicon-Größen brauchst du?

Ein einzelnes 16×16-Pixel-Icon reicht schon lange nicht mehr. Verschiedene Geräte, Betriebssysteme und Browser verlangen verschiedene Formate und Größen. Hier die vollständige Liste:

  • 16×16 px — Klassisches Browser-Tab-Favicon (ICO oder PNG)
  • 32×32 px — Höhere Auflösung für Retina-Tabs und Taskleisten
  • 48×48 px — Windows-Verknüpfungen und einige Bookmark-Manager
  • 96×96 px — Google TV, einige Android-Versionen
  • 180×180 px — Apple Touch Icon (iPhone/iPad Homescreen)
  • 192×192 px — Android Chrome, PWA-Icon (manifest.json)
  • 512×512 px — PWA-Splash-Screen, Chrome Install-Banner, Google-Cache

Unser Generator erstellt alle diese Größen automatisch aus einem einzigen Ausgangsbild. Du lädst dein Logo oder Bild in mindestens 512×512 Pixel hoch, und bekommst eine ZIP-Datei mit allen Formaten — inklusive der ICO-Datei, die mehrere Auflösungen in einer Datei bündelt.

ICO, PNG oder SVG — welches Format für was?

Die drei relevanten Favicon-Formate haben unterschiedliche Stärken:

  • ICO — Das klassische Format. Kann mehrere Größen in einer Datei speichern (16, 32, 48). Wird von allen Browsern unterstützt und ist Pflicht für maximale Kompatibilität. Die Datei heißt immer favicon.ico und liegt im Root-Verzeichnis deiner Website.
  • PNG — Moderner Standard mit Transparenz-Support. Wird über <link>-Tags im HTML eingebunden. Ideal für größere Größen (180, 192, 512), wo ICO zu groß wird. Ein PNG pro Größe.
  • SVG — Vektorgrafik, skaliert verlustfrei auf jede Größe. Wird von modernen Browsern als Favicon unterstützt (<link rel="icon" type="image/svg+xml">). Perfekt für einfache Logos. Noch nicht von Safari unterstützt.

Die beste Strategie: ICO als Fallback + PNG für definierte Größen + optional SVG für moderne Browser. Genau das liefert unser Generator.

So bindest du das Favicon in deine Website ein

Nach dem Download unseres Favicon-Pakets lädst du die Dateien in den Root-Ordner deiner Website (/) und fügst folgenden HTML-Code in den <head>-Bereich ein:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Der HTML-Code wird beim Download automatisch generiert und liegt als favicon-code.html in deiner ZIP-Datei. Du kannst ihn direkt kopieren.

In WordPress geht es noch einfacher: Unter Design → Customizer → Website-Informationen → Website-Icon kannst du das 512×512-PNG hochladen. WordPress generiert dann die meisten Größen automatisch — allerdings nicht die ICO-Datei und nicht die manifest.json. Für vollständige Kontrolle empfehlen wir den manuellen Weg über unser Tool.

Text-Favicon: Initialen statt Logo

Nicht jedes Unternehmen hat ein Logo, das bei 16×16 Pixeln noch erkennbar ist. Detaillierte Logos mit feinen Linien, Schattierungen oder vielen Elementen werden als Favicon zu einem unleserlichen Pixelbrei. Die Lösung: ein Text-Favicon aus 1-3 Buchstaben.

Unser Generator hat dafür einen eigenen Modus. Du tippst deine Initialen ein (z.B. "FC" für Firmencharisma), wählst Text- und Hintergrundfarbe, und bekommst ein scharfes, lesbares Favicon in allen Größen. Drei Formen stehen zur Wahl: Quadrat, abgerundet und Kreis.

Tipp: Verwende deine Markenfarbe als Hintergrund und weiße oder sehr helle Buchstaben. Das erzeugt maximalen Kontrast — und den kannst du direkt mit unserem Farbkontrast Checker prüfen.

Die häufigsten Favicon-Fehler

Kein Favicon hochgeladen. Jeder Browser fragt automatisch nach /favicon.ico. Wenn die Datei nicht existiert, produziert das einen 404-Fehler in den Server-Logs — bei jeder einzelnen Seitenanfrage. Das erzeugt unnötige Serverlast und sieht in deinen Analytics hässlich aus.

Nur eine einzige Größe. Ein 16×16-Favicon auf dem iPhone-Homescreen wird hochskaliert und sieht matschig aus. Umgekehrt wird ein großes PNG, das nur als 512er existiert, im Browser-Tab herunterskaliert — oft mit Artefakten. Immer alle Größen liefern.

Zu viele Details im Motiv. Was auf 512×512 gut aussieht, ist auf 16×16 ein unleserlicher Fleck. Favicons müssen radikal vereinfacht sein: ein Buchstabe, ein Symbol, ein abstraktes Shape. Kein ausgeschriebener Firmenname, keine komplexen Illustrationen.

Transparenter Hintergrund vergessen. PNGs unterstützen Transparenz — aber nicht jeder Kontext zeigt das Favicon auf weißem Hintergrund. Dunkle Browser-Themes, Android-Homescreens mit dunklem Wallpaper: Wenn dein Favicon-Motiv selbst dunkel ist und der Hintergrund transparent, wird es unsichtbar.

manifest.json fehlt. Ohne manifest.json weiß Chrome nicht, welches Icon auf dem Android-Homescreen oder als PWA-Splash-Screen verwendet werden soll. Ergebnis: ein generisches Chrome-Icon statt deinem Branding.

Was die manifest.json macht

Die manifest.json (auch Web App Manifest) ist eine kleine JSON-Datei, die dem Browser Metadaten über deine Website liefert. Für Favicons relevant sind die Felder icons, name, short_name und theme_color.

Unser Generator erzeugt eine fertige manifest.json mit allen Icon-Größen. Du musst nur name und short_name auf deinen Firmennamen anpassen. So sieht sie aus:

{
  "name": "Dein Firmenname",
  "short_name": "Firma",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0F172A",
  "background_color": "#FFFFFF",
  "display": "standalone"
}

Die Datei wird über <link rel="manifest" href="/manifest.json"> im HTML-Head eingebunden. Chrome, Edge und Samsung Internet lesen sie automatisch.

So erstellst du die optimale Favicon-Vorlage

Am besten startest du mit einer quadratischen PNG-Datei in 512×512 Pixel (oder größer). Achte auf:

  • Einfachheit: Maximal ein Element. Ein Buchstabe, ein Symbol, ein Icon. Reduziere dein Logo auf das Wesentlichste.
  • Kontrast: Helles Motiv auf dunklem Grund (oder umgekehrt). Teste mit dem Kontrast Checker.
  • Rand: Lass 10-15% Rand um das Motiv. Android schneidet Favicons kreisförmig zu — was an den Ecken liegt, wird abgeschnitten.
  • Transparenz: Nur verwenden, wenn dein Motiv auf hellem UND dunklem Hintergrund funktioniert. Im Zweifel: farbiger Hintergrund.

Wenn du kein passendes Bild hast, nutze den Text-Modus unseres Generators. 1-2 Buchstaben in deiner Markenfarbe reichen aus, um ein professionelles Favicon zu erstellen, das auf jeder Größe scharf bleibt.

Favicon und Barrierefreiheit — was du wissen solltest

Favicons unterliegen keinen direkten WCAG-Anforderungen — sie sind dekorativ und werden von Screen-Readern ignoriert. Aber indirekt spielt Barrierefreiheit trotzdem rein: Ein Favicon mit zu wenig Kontrast ist auf kleinen Bildschirmen nicht erkennbar. Ein Favicon ohne erkennbare Form auf dunklem Hintergrund verschwindet in Dark-Mode-Tabs.

Unsere Empfehlung: Behandle dein Favicon wie ein UI-Element. Teste es auf hellem und dunklem Hintergrund, bei verschiedenen Größen, und prüfe den Farbkontrast zwischen Motiv und Hintergrund. Wenn du bei unserem Kontrast Checker unter 3:1 liegst, wird dein Favicon auf dem falschen Hintergrund unsichtbar.