Der 16-Pixel-Ersteindruck
Favicons sind die kleinste Branding-Fläche, die du besitzt – 16×16 Pixel in einem Browser-Tab – und eine der sichtbarsten. Nutzer identifizieren deine Website unter 30 offenen Tabs an diesem winzigen Quadrat. Ein fehlendes oder unscharfes Favicon signalisiert leise „unfertig“. Die gute Nachricht: Es richtig zu machen dauert etwa zwei Minuten.
Welche Größen brauchst du 2026 wirklich?
- 16×16 und 32×32 – Browser-Tabs und Lesezeichen (in der .ico-Datei)
- 48×48 – Windows-Taskleisten-Verknüpfungen (in der .ico-Datei)
- 180×180 – Apple-Touch-Icon für den iOS-Homescreen
- 192×192 und 512×512 – Android-/PWA-Manifest-Icons
- SVG (optional, aber schön) – unendlich scharf in modernen Browsern mit einer winzigen Datei
Das klassische favicon.ico ist eigentlich ein Container, der 16-, 32- und 48px-Versionen hält – Browser wählen die richtige. Unser Favicon-Generator baut das korrekte mehrgrößen ICO plus alle PNGs aus einem einzigen Quellbild.
Starte mit dem richtigen Quellbild
Hier scheitern die meisten Favicons. Verkleinere nicht dein volles detailliertes Logo – bei 16px wird es zu Matsch. Stattdessen:
- Nutze ein vereinfachtes Zeichen: nur den Icon-Teil deines Logos, oder sogar einen einzelnen Buchstaben auf Markenfarb-Hintergrund
- Starte von einem 512×512 oder größeren quadratischen PNG mit zentriertem Zeichen und Polsterung (halte ~15 % Rand, damit es die Kanten nicht berührt)
- Denke in kleiner Größe: fette Formen, hoher Kontrast, keine dünnen Linien oder kleinen Texte
Teste früh und oft bei 16px – wenn es dort nicht lesbar ist, vereinfache weiter.
Dark-Mode-Tabs: die Falle
Browser-Chrome folgt inzwischen dem System-Dark-Mode, sodass ein dunkles Favicon auf dunklem Tab-Hintergrund verschwindet. Zwei Lösungen: Füge einen dezenten hellen Hintergrund oder ein abgerundetes Quadrat hinter dein Zeichen, oder stelle ein prefers-color-scheme-bewusstes SVG-Favicon bereit. Schaue dir dein Favicon vor dem Release mindestens gegen helle und dunkle Tab-Leisten in der Vorschau an.
Erstelle deines in einem Rutsch
Lade dein Quellbild in unseren Favicon-Generator hoch – er erzeugt das mehrgrößen ICO, alle PNG-Größen und eine Live-Vorschau in echten Tab-Größen. Lade einzeln herunter oder nimm alles als ZIP, lege die Dateien ins Website-Root und füge die Link-Tags hinzu. Zwei Minuten, ordentlich gemacht.
Häufige Fragen
- Ist ICO noch nötig, oder reicht PNG?
- ICO ist immer noch die sicherste Standardwahl – jeder Browser unterstützt es, inklusive älterer, und es bündelt mehrere Größen in einer Anfrage. Liefere PNG-Größen daneben für Mobil/PWA. Doppelt hält besser, bei vernachlässigbaren Kosten.
- Warum sieht mein Favicon unscharf aus?
- Fast immer eine von zwei Ursachen: Du hast ein kleines Quellbild hochskaliert (starte von 512px+), oder der Browser streckt dein 16px-Icon auf 32px auf einem Retina-Display (liefere das mehrgrößen ICO, damit er korrekt wählt).
- Wie füge ich das Favicon zu meiner Website hinzu?
- Lege
favicon.icoins Website-Root (Browser prüfen dort automatisch) und füge<link rel="icon">-Tags für die PNG-Größen plusapple-touch-iconhinzu. Wenn du Next.js nutzt, erledigt dieapp/icon.png-Konvention das meiste für dich.