Die kurze Antwort
Für Icons und Logos auf Websites gilt 2025 eine klare Reihenfolge: SVG > WebP > PNG > JPG. SVG ist fast immer die beste Wahl — außer das Icon ist zu komplex oder nur als Rasterbild verfügbar. Dann kommt WebP, danach PNG. JPG ist für Icons und Logos fast nie geeignet.
SVG — der klare Sieger für Icons
SVG (Scalable Vector Graphics) ist für Icons und Logos das überlegene Format:
- Skaliert verlustfrei auf jede Größe — perfekt scharf auf 16px und auf 512px
- Meist sehr kleine Dateigröße — einfache Icons oft unter 1 KB
- Animierbar via CSS und JavaScript
- Theming möglich — Farben per CSS-Variable oder currentColor anpassbar
- Direkt in HTML einbettbar — kein HTTP-Request nötig
- Barrierefreiheit — title und desc Attribute für Screenreader
Wann SVG an Grenzen stößt
- Sehr komplexe Illustrationen mit tausenden Pfaden — SVG kann dann größer als PNG sein
- Fotorealistisches Icondesign — nicht für SVG geeignet
- Wenn SVG als Format nicht verfügbar ist (nur Rasterbilder vorhanden)
- SVG aus fremden Quellen kann XSS-Risiken enthalten (nicht als <img src> aus User-Uploads)
PNG — der sichere Zweitplatz
Wenn SVG nicht verfügbar ist, ist PNG die erste Wahl für Icons:
- Transparenz via Alpha-Kanal — auf beliebigen Hintergründen einsetzbar
- Verlustfreie Qualität — scharfe Kanten und Farben ohne Artefakte
- Universal kompatibel — in allen Apps, E-Mails, Dokumenten
Hauptnachteil: PNG skaliert schlecht nach oben. Ein 32×32px Icon das auf einem Retina-Display mit 64×64px dargestellt wird, erscheint unscharf. Abhilfe: 2×-Version (64×64px) bereitstellen.
WebP — moderne Alternative zu PNG
WebP bietet für Icons und Logos gegenüber PNG mehrere Vorteile:
- Voller Alpha-Kanal wie PNG
- Kleinere Dateigröße (verlustfrei: ~26% kleiner als PNG)
- Verlustbehaftet möglich — für leicht detailreichere Icons
Einschränkung: Nicht in E-Mails und bei älterer Software verwendbar. Für reine Web-Nutzung ist WebP PNG fast immer vorzuziehen.
JPG — für Icons ungeeignet
JPG hat für Icons und Logos drei fatale Schwächen:
- Keine Transparenz — Logos auf transparentem Hintergrund unmöglich
- Komprimierungsartefakte — scharfe Kanten und Text werden unscharf und blockartig
- Qualitätsverlust bei Neuspeicherung — jede Bearbeitung verschlechtert die Qualität
JPG ist für Fotos entwickelt worden — nicht für Grafiken. Für Icons und Logos gibt es keine sinnvolle Verwendung von JPG.
Detaillierter Vergleich für Icon-Anwendungsfälle
| Use Case | Beste Wahl | Fallback |
|---|---|---|
| Website-Logo | SVG | WebP (PNG als E-Mail-Fallback) |
| Navigations-Icons | SVG (Sprite oder inline) | WebP PNG |
| Favicon | SVG (moderne Browser) + PNG 32px | favicon.ico |
| App-Icon (PWA) | PNG (192, 512px) | — |
| E-Mail-Signatur-Logo | PNG | JPG (ohne Transparenz) |
| Icon in Word/PDF | PNG oder SVG (je nach App) | PNG |
| Icon in Social Media Bio | PNG oder JPG | — |
| Icon mit Farbwechsel via CSS | SVG (inline oder als CSS-Maske) | — |
Icon-Formate und Dark Mode
SVG bietet die eleganteste Dark-Mode-Lösung: Mit currentColor in den Pfadfüllungen übernimmt das Icon automatisch die Textfarbe — weiß im Dark Mode, schwarz im Light Mode. Kein separates Icon-Set nötig.
Bei PNG und WebP braucht man entweder separate Icon-Versionen für Dark und Light Mode, oder man nutzt CSS-Filter (filter: invert(1)) für einfarbige Icons — was aber nur bei rein schwarzen/weißen Icons gut funktioniert.
Dateigrößen-Vergleich: Gleiches Icon in verschiedenen Formaten
| Format | Typische Größe (einfaches Logo, 64px) | Vorteil |
|---|---|---|
| SVG (optimiert) | 0,5–3 KB | Skaliert verlustfrei |
| WebP (verlustfrei) | 1–5 KB | Kleiner als PNG |
| PNG | 2–8 KB | Universal |
| JPG | 3–10 KB (mit Artefakten) | — |
SVG in der Praxis: Inline vs. Externem Verweis
SVG kann auf zwei Wegen eingebunden werden:
- Inline (
<svg>…</svg>direkt im HTML): Kein HTTP-Request, vollständig per CSS und JS manipulierbar, perfekt für Icons die animiert oder gefärbt werden sollen - Als <img src="icon.svg">: Separater HTTP-Request, aber gecacht; kein JS-Zugriff auf SVG-Inhalt, einfacher im Markup
Fazit
SVG ist für Icons und Logos 2025 die klare erste Wahl. Skalierbar, animierbar, themeable, oft kleiner als Rasterformate. Wenn kein SVG verfügbar ist: WebP für Web-Nutzung, PNG für universelle Kompatibilität. JPG für Icons zu verwenden ist ein häufiger Fehler der zu unschönen Artefakten und Kompatibilitätsproblemen führt.