Favicon unscharf? Pixelierung beheben

Ein unscharfes Favicon bedeutet fast immer: Der Browser skaliert eine zu kleine Datei hoch, skaliert ein schlecht exportiertes großes Bild herunter, oder quetscht ein nicht-quadratisches Logo in eine quadratische Box. Favicons werden in Tabs bei etwa 16×16 oder 32×32 Pixeln gerendert. Feine Details verschwinden bei falscher Quelldatei.

Dieser Ratgeber erklärt, warum Pixelierung entsteht und wie du aus einem Master ein scharfes Icon-Set exportierst. Größen vor dem Launch im Favicon Check in der Size-Lab-Vorschau prüfen.

Warum Favicons unscharf wirken

Browser zeigen dein 512×512-Upload nicht in voller Größe im Tab. Sie wählen die passendste deklarierte Größe und rasterisieren auf etwa 16×16 oder 32×32 physische Pixel.

Unschärfe entsteht, wenn:

1. Quelle zu klein - 16×16-PNG wird auf Retina auf 32×32 hochskaliert
2. Falsches sizes-Attribut - Browser wählt unpassende Datei
3. Nicht-quadratische Grafik - Logo wird weich in Quadrat gezwungen
4. Stark komprimiertes JPG - Artefakte im Thumbnail sichtbar
5. Dünne Linien und kleiner Text - in Tab-Größe unleserlich
6. Screenshot als Icon - weiche Kanten und gemischte Auflösungen

Scharfe Favicons starten mit großem Master und bewusstem Downscaling, nicht umgekehrt.

Schritt 1: Welche Datei der Browser wirklich nutzt

Du hast fünf Icon-Dateien, der Browser lädt für Tabs oft die kleinste.

1. Favicon Check öffnen und URL scannen.
2. Jede Datei mit sizes und Dimensionen notieren.
3. 32×32- und 16×16-Einträge herunterladen.
4. In Bildeditor bei 100 % Zoom öffnen.

Ist die „32×32“-Datei in Wirklichkeit 16×16 gestreckt oder ein matschiges JPG, hast du die Ursache.

Falsche sizes-Metadaten

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-512.png">

Der Browser skaliert 512 auf 32 herunter. Das kann funktionieren, wenn der Export sauber ist. sizes="32x32" auf weicher Datei sieht trotzdem schlecht aus. Echte Pixelmaße und Attribut müssen zusammenpassen.

Schritt 2: Von 512×512-Master exportieren

Workflow für die meisten Marken:

1. Auf 512×512 px quadratischem Artboard designen.
2. Markierung in zentraler 80-%-Safe-Zone halten.
3. PNG bei 512, 192, 180, 32 und 16 px per Downscaling exportieren (Bicubic oder Lanczos).
4. favicon.ico mit 16-, 32- und 48-px-Ebenen bauen.
5. Jede Größe im HTML deklarieren. Siehe Favicon-Größen-Leitfaden.

Niemals 16×16 auf 32×32 hochskalieren. Immer groß designen, klein exportieren.

Das Size-Lab im Favicon Check lässt dich ein quadratisches PNG hochladen und Tab-, Lesezeichen- und Homescreen-Kontexte vor dem Commit prüfen.

Schritt 3: Grafik für kleine Größen vereinfachen

Für Briefköpfe designte Logos überleben 16 px selten.

Empfohlen

• Klare Silhouette oder Monogramm
• Volle Formen, hoher Kontrast
• Maximal 2-3 Farben
• In echter Pixelgröße testen

Vermeiden

• Vollständige Wortmarken mit dünnem Schriftbild
• Verläufe, die klein matschig werden
• Haarlinien unter 2 px in Exportgröße
• Fototexturen

Exportiere eine vereinfachte Variante fürs Favicon, wenn das Hauptlogo detailreich ist. Viele Marken nutzen im Tab ein Monogramm, auf der Site das volle Logo.

Schritt 4: Nicht-quadratische Quellen fixen

Rechteckige Logos werden mit Letterboxing oder Stauchen in die Favicon-Box gezwungen.

Vor dem Export bewusst auf Quadrat croppen. Symbol zentrieren. Nicht auf gleichmäßiges Browser-Padding hoffen.

Muss die Marke breit bleiben, quadratisches Canvas mit eingebettetem horizontalen Padding nutzen, nicht transparente Lücken mit uneinheitlicher Browser-Interpretation.

Schritt 5: PNG oder ICO, kein JPG für kleine Icons

JPG-Kompression erzeugt Kantenartefakte. Bei 16×16 wirkt das wie Unschärfe.

PNG-24 für flache Grafiken. Dateigröße danach mit pngquant optimieren, wenn Kanten bei 100 % noch scharf sind.

Schritt 6: Retina-/HiDPI-Tab-Unschärfe

Auf Retina-Displays kann 16×16 in 32×32 Device-Pixel-Bereich gezeichnet werden. Beides liefern:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Nur 16×16 liefert Hochskalierung und damit Weichzeichnung.

Schritt 7: iOS und Android unterscheiden sich vom Tab

Scharfes Tab-Icon kann auf dem Homescreen weich wirken, wenn apple-touch-icon zu klein ist.

Unschärfe auf dem Handy-Homescreen ist oft ein 180×180- oder 192×192-Problem, nicht die Tab-Datei. Mit Favicon Check Manifest und apple-touch-Einträge getrennt prüfen.

Schritt 8: Nach Export validieren

1. Neue Dateien auf Produktion hochladen.
2. href anpassen, wenn Dateinamen geändert wurden.
3. Live-URL mit Favicon Check scannen.
4. Jede Größe aus den Ergebnissen bei 100 % prüfen.
5. Im Browser-Tab und auf Handy-Homescreen testen.

Sieht es in der Checker-Vorschau scharf aus, in einem Browser aber weich, Cache leeren oder Inkognito testen. Gecachte Low-Res-Versionen können tagelang bleiben.

Typische Fehler

Nur 1x aus Figma exportiert

Einmal 16×16 exportiert und fertig. Volle Leiter vom 512-Master exportieren.

Dieselbe 512er-Datei überall

Browser skalieren herunter, manche Tools weich. Jede Größe vorrendern.

Winziger Text im Icon

Firmenname in 8px-Schrift wird Matsch. Symbol oder ein Buchstabe.

Halbtransparente Kanten auf dunklem Browser-UI

Weißes Logo auf transparentem PNG verschwindet auf hellem Chrome und wirkt auf dunklem unscharf. Dezenter Hintergrundkreis oder solide Fläche dahinter.

Screenshot eines bestehenden Favicons

Jede Generation verliert Qualität. Vom Vektor neu bauen.

ICO aus schlechtem Generator

Manche Online-Tools erzeugen weiche 32×32-Ebenen. Exportiere PNGs selbst aus Figma, Sketch oder Illustrator und packe sie mit einem verlässlichen ICO-Builder zusammen. Danach im Favicon Check herunterladen und bei 100 % Zoom prüfen.

Checkliste vor Export

• Master-Artboard 512×512 px
• Markierung in zentraler 80-% Safe Zone
• Vereinfachte Version für kleine Größen
• PNG-Exporte bei 16, 32, 180, 192, 512
• favicon.ico mit 16- und 32-px-Ebenen
• Jedes sizes-Attribut passt zu echten Pixeln
• Vorschau im Favicon Check Size Lab
• Tab bei 100 % und 200 % Display-Skalierung getestet

Unscharf vs. fehlend

Fehlendes Favicon: Favicon wird nicht angezeigt. Unscharf heißt: Datei wird gefunden, Qualität stimmt nicht.

Vergleich: Export aus Photoshop vs. Figma

Photoshop „Save for Web“ mit unscharfem Resampling erzeugt weiche 32×32-Dateien. In Figma exportierst du über „Export“ mit exakter Pixelgröße. In beiden Tools: Export bei 32 und 16 px einzeln prüfen, nicht nur im Zoom.

Nach Export alle Größen in Favicon Check hochladen oder die Live-URL scannen. Ein direkter Vergleich der Vorschauen spart Rätselraten zwischen Design-Tool und Browser.

Retina-Laptop vs. Standard-Display

Auf Retina-MacBooks werden Tab-Icons mit mehr Device-Pixeln gezeichnet. Fehlt 32×32, skaliert der Browser 16×16 hoch. Auf älteren Displays fällt das weniger auf, auf Retina sofort.

Lade dein Icon im Size-Lab von Favicon Check und wechsle zwischen Tab-Vorschau und vergrößerter Ansicht. Wenn die 32×32-Vorschau schon weich wirkt, liegt es am Export, nicht am Display.

FAQ

Warum ist mein Favicon in Chrome unscharf?

Chrome skaliert vermutlich 16×16 auf Retina hoch oder skaliert ein schlecht exportiertes großes PNG herunter. Scharfes 32×32- und 16×16-Paar vom Vektor-Master liefern.

Welche Größe vermeidet Unschärfe?

Bei 512×512 designen, 32×32 und 16×16 für Tabs, 180×180 für iOS, 192×192 für Android exportieren.

Kann SVG unscharfe Favicons fixen?

SVG bleibt auf Desktop-Browsern mit Support scharf. iOS und Android brauchen weiter PNG. SVG plus PNG-Fallback.

Im Designer scharf, live unscharf?

Design-Tools zoomen beliebig. In echter Pixelgröße exportieren und bei 100 % prüfen.

Reduziert favicon.ico die Qualität?

ICO kann mehrere Auflösungen halten. Qualität hängt vom Inhalt ab. Scharfe 32×32-Ebene im ICO sieht scharf aus.

Unschärfe vor Deploy erkennen?

Upload ins Size-Lab bei Favicon Check, Tab- und Homescreen-Vorschau prüfen.

apple-touch-icon unscharf auf iPhone?

Dediziertes 180×180-PNG vom Master exportieren. Nicht das 32×32-Tab-Icon hochskalieren.

Machen Kompressions-Tools das Favicon unscharf?

Aggressive lossy Kompression kann das. Nach scharfen Kanten bei 100 % Zoom erst mild optimieren.

Sieht das Icon im Favicon Check scharf aus, im Tab aber nicht?

Dann ist eher Cache oder ein anderes deklariertes File aktiv. Scan-Ergebnis mit view-source abgleichen und in Inkognito testen.

Unscharf nur im Dark-Mode-Browser?

Helles Logo auf transparentem PNG kann auf dunklem Tab-Chrome verschwinden oder weich wirken. Leichter Hintergrundkreis oder quadratische Fläche in Markenfarbe hinter dem Symbol löst beide Themes.

Mehrere Marken-Varianten im Repo

Manchmal liegt favicon-light.png im Repo, HTML zeigt aber auf favicon-dark.png, das es nicht gibt. Scan listet alle href-Ziele. Fehlende Variante ersetzen oder Media-Query-Setup für prefers-color-scheme sauber dokumentieren.

Export aus Canva oder ähnlichen Tools

Canva erlaubt Custom Size, aber Standard-Exporte sind nicht immer pixelgenau. Nach Export Dateimaße im Finder oder Explorer prüfen. Bei 31×32 oder 33×33 statt 32×32 Browser-Unschärfe erwarten. Korrigieren und erneut im Favicon Check testen.

Fazit

Unscharfe Favicons kommen von kleinen Quellen, schlechten Exporten und zu detaillierter Grafik für 16 px. Bei 512×512 designen, auf jede deklarierte Größe herunterskalieren, Mark vereinfachen und mit dem Favicon Check validieren. Scharfe Tabs sind ein Export-Problem, kein Browser-Bug.