Favicon-Größen und Dateiformate: (PNG, SVG, ICO, GIF erklärt)
Favicons sind kleine Symbole, die Browser-Tabs, Lesezeichen oder App-Icons darstellen. Obwohl sie winzig wirken, sind sie für Wiedererkennung und Markenauftritt entscheidend.
Warum Favicons wichtig sind
Ein Favicon erhöht die Klickrate in Lesezeichen und Tabs, vermittelt Professionalität und stärkt die Markenidentität.
Ein gut gestaltetes Favicon kann den Unterschied machen – schon bei 16x16 Pixeln.
Alle gängigen Favicon-Größen
| Plattform / Gerät | Größe (px) | Verwendung / Hinweis | Format |
|---|---|---|---|
| Browser Standard | 16x16 | Browser-Tabs | .ico, .png |
| Browser Standard | 18x18 | Browser-Extensions | .ico, .png |
| Browser Standard | 24x24 | Browser-Tabs, kleine Icons | .ico, .png |
| Browser Standard | 32x32 | Hochauflösende Tabs, Lesezeichen | .ico, .png |
| Browser Standard | 48x48 | Windows Shortcuts, Lesezeichen | .ico, .png |
| Browser Standard | 64x64 | Desktop Icons, Favicons | .ico, .png |
| Browser Standard | 128x128 | Desktop Icons, Favicons | .ico, .png |
| Browser Standard | 256x256 | High-Res Desktop Icons | .ico, .png |
| Browser Standard | 512x512 | PWA Icons / High-Res | .png |
| Apple iOS | 57x57 | iPhone Classic (iOS ≤6) | .png |
| Apple iOS | 60x60 | iPhone Retina | .png |
| Apple iOS | 72x72 | iPad Classic | .png |
| Apple iOS | 76x76 | iPad Retina | .png |
| Apple iOS | 114x114 | iPhone Retina (iOS ≤6) | .png |
| Apple iOS | 120x120 | iPhone Retina (iOS 7+) | .png |
| Apple iOS | 152x152 | iPad Retina (iOS 7+) | .png |
| Apple iOS | 167x167 | iPad Pro (iOS 10+) | .png |
| Apple iOS | 180x180 | iPhone Retina (@3x) | .png |
| Apple iOS | 256x256 | iOS App Icon / Large Display | .png |
| Apple iOS | 512x512 | High-Res App Icon | .png |
| Apple iOS | 1024x1024 | Mac App Store Icon | .png |
| Android / PWA | 36x36 | Launcher MDPI | .png |
| Android / PWA | 48x48 | Launcher HDPI | .png |
| Android / PWA | 72x72 | Launcher XHDPI | .png |
| Android / PWA | 96x96 | Launcher XXHDPI | .png |
| Android / PWA | 144x144 | Launcher XXXHDPI | .png |
| Android / PWA | 192x192 | Homescreen Icon, PWA Standard | .png |
| Android / PWA | 256x256 | Optional für große Displays | .png |
| Android / PWA | 512x512 | Pflicht für PWA & Play Store | .png |
| Android / PWA | 1024x1024 | High-Res Display | .png |
| Windows / Microsoft | 70x70 | Small Tile | .png |
| Windows / Microsoft | 150x150 | Medium Tile | .png |
| Windows / Microsoft | 310x150 | Wide Tile | .png |
| Windows / Microsoft | 310x310 | Large Tile | .png |
| Windows / Microsoft | 256x256 | Desktop Icon, High-Res | .png |
| macOS / Safari | — | Pinned Tabs, monochrome, skalierbar | .svg |
| macOS / Safari | 512x512 | High-Res App Icon | .png |
| macOS / Safari | 1024x1024 | Mac App Store Icon | .png |
| High-Res | 2048x2048 | Ultra-HD Displays | .png |
| High-Res | 4096x4096 | Spezial-Use, selten benötigt | .png |
| Maskable | variabel | Android Maskable Icon | .png |
Für moderne Webseiten reicht meist ein Set von 16, 32, 48, 180, 192, 512 px, alles andere ist optional oder für spezielle Plattformen.
Favicon-Dateiformate
ICO
- Klassisches Favicon-Format
- Unterstützt mehrere Größen in einer Datei
- Maximale Kompatibilität für alle Browser
PNG
- Unterstützt Transparenz
- Ideal für Retina-Displays
- Moderne Standardgröße
SVG
- Vektorbasiert, skalierbar
- Sehr geringe Dateigröße
- Optimal für hochauflösende Displays
GIF
- Unterstützt Animationen
- Selten verwendet
- Kann Aufmerksamkeit erzeugen, sollte sparsam eingesetzt werden
JPG / WebP
- JPEG: für einfache Icons ohne Transparenz
- WebP: moderne Alternative, gute Kompression, unterstützt Transparenz
Nutze einen Favicon Generator, um automatisch alle Formate und Größen zu erzeugen.
Best Practices
- Master-Bild: mindestens 512x512 PNG erstellen
- ICO für ältere Browser ergänzen
- SVG für skalierbare Qualität nutzen
- Test auf verschiedenen Browsern durchführen
- Klare, erkennbare Symbole verwenden
SEO und UX
Favicons beeinflussen das Ranking nicht direkt, verbessern aber Klickrate und Wiedererkennung. Ein professionelles Icon erhöht die Benutzerzufriedenheit und das Vertrauen in die Webseite.
Fazit
Ein Favicon ist klein, aber entscheidend für Markenwahrnehmung und Nutzererlebnis. Mit allen Größen von 16 bis 4096 px und Formaten wie ICO, PNG, SVG, GIF und WebP bist du für alle Plattformen gerüstet.