PNG vs ICO: Welches Favicon-Format sollten Sie verwenden?

Verwirrt über favicon-Formate? Lernen Sie die wichtigsten Unterschiede zwischen PNG und ICO kennen, welches Sie wählen sollten und Best Practices für moderne Websites im Jahr 2026.

Fazit: Empfehlung 2026

In der Praxis hat sich die Kombination aus ICO und PNG bewährt. Nur ICO reicht auf modernen Systemen oft nicht aus, nur PNG kann bei älteren Setups fehlschlagen. Daher: /favicon.ico als Basis, dazu 32×32 und 16×16 als PNG sowie Apple Touch Icon.

PNG vs. ICO im Überblick

• ICO: Mehrere Größen in einer Datei, hohe Kompatibilität.
• PNG: Gute Qualität, Transparenz und Farbtreue.
• Nachteile ICO: Qualität je nach Tool unterschiedlich.
• Nachteile PNG: Alte Referenzen lassen sich nicht immer ersetzen.

Wichtig ist weniger „welches Format gewinnt“, sondern dass Sie Ausfälle in verschiedenen Umgebungen minimieren. ICO als Kompatibilitäts-Schicht, PNG für Qualität.

Empfohlener Dateisatz

1. /favicon.ico (16/32)
2. /favicon-32x32.png, /favicon-16x16.png
3. /apple-touch-icon.png (180×180)

Für PWA zusätzlich 192×192 und 512×512 sowie Einträge in manifest.json.

Wann welches Format priorisieren?

• Unternehmensseiten: ICO + PNG (Kompatibilität).
• App-Landingpages / PWA: PNG im Fokus, ICO als Fallback.
• Häufige Updates: PNG vereinfacht den Austausch.

HTML-Beispiel

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

Nach Änderungen ggf. Cache-Query-Parameter oder CDN-Cache leeren.

Typische Fehler und Vermeidung

1. Altes Icon sichtbar: Browser- und CDN-Cache leeren.
2. Nur mobil nicht sichtbar: Apple Touch Icon prüfen.
3. Unscharf: Ausgangsbild 512×512 oder größer.
4. Farbabweichungen: ICO-Einstellungen prüfen, PNG ergänzen.

Checkliste vor Veröffentlichung

• ICO und PNG ausgeliefert.
• Keine 404 bei link-Tags.
• Desktop und Mobil getestet.
• Cache-Strategie nach Update umgesetzt.