App-Icon Größen: iOS, Android und Web – die komplette Übersicht
Welche Größen braucht ein App-Icon für iOS, Android und PWA? Wir erklären alle Pflichtgrößen, Formate und häufige Fehler – mit direktem Link zum kostenlosen Icon-Generator.
Inhalt
- 1.Warum gibt es so viele verschiedene Größen?
- 2.iOS – die wichtigsten Größen
- 3.Android – die wichtigsten Größen
- 4.Web & PWA – was man braucht
- 5.Das perfekte Ausgangsbild
- 6.Häufige Fehler
Warum gibt es so viele verschiedene Größen?
Smartphones gibt es in Dutzenden verschiedenen Bildschirmauflösungen und Pixeldichten. Ein Icon, das auf einem alten iPhone klar aussieht, würde auf einem modernen Retina-Display unscharf wirken – und umgekehrt würde ein großes Icon auf alten Geräten zu viel Speicher verbrauchen. Deshalb liefern Entwickler dasselbe Icon in mehreren Größen aus, und das Betriebssystem wählt automatisch die passende.
iOS – die wichtigsten Größen
| Verwendung | Größe | Skala |
|---|---|---|
| Notification | 20×20 px | @1x |
| Notification | 40×40 px | @2x |
| Settings | 58×58 px | @2x |
| Spotlight | 80×80 px | @2x |
| App Icon (iPhone) | 120×120 px | @2x |
| App Icon (iPhone) | 180×180 px | @3x |
| App Store Abgabe | 1024×1024 px | @1x |
Das App Store Icon (1024×1024 px) darf keinen Alpha-Kanal (Transparenz) enthalten – Apple lehnt solche Uploads ab. Alle anderen Größen können transparent sein, wenn das Design es erfordert.
Android – die wichtigsten Größen
Android unterteilt Bildschirme nach Pixeldichte (dpi). Die Suffix-Bezeichnungen mdpi, hdpi, xhdpi, xxhdpi und xxxhdpi entsprechen den Faktoren 1x, 1,5x, 2x, 3x und 4x relativ zur Basis-Auflösung von 48×48 px.
| Dichte | Größe | Faktor |
|---|---|---|
| mdpi | 48×48 px | 1× |
| hdpi | 72×72 px | 1,5× |
| xhdpi | 96×96 px | 2× |
| xxhdpi | 144×144 px | 3× |
| xxxhdpi | 192×192 px | 4× |
| Play Store | 512×512 px | — |
Web & PWA – was man braucht
- favicon.ico (16×16 und 32×32 px): Wird im Browser-Tab angezeigt – das klassische kleine Icon
- apple-touch-icon.png (180×180 px): Wird verwendet, wenn jemand eine Website zum iPhone-Homescreen hinzufügt
- PWA-Icon 192×192 px: Pflicht für Progressive Web Apps (manifest.json)
- PWA-Icon 512×512 px: Wird beim Installationsscreen von PWAs verwendet
Das perfekte Ausgangsbild
Für alle Plattformen gilt: Das Ausgangsbild sollte quadratisch sein und mindestens 1024×1024 px haben – besser noch 2048×2048 px. Wer mit einer Vektorgrafik (SVG, AI, Figma) arbeitet, kann verlustfrei in jede beliebige Größe exportieren. Pixelbilder (PNG, JPG) verlieren bei starker Vergrößerung an Qualität, daher immer mit der größten benötigten Auflösung starten.
Häufige Fehler
- Transparenz im iOS App Store Icon: Apple lehnt das ab – weißen oder farbigen Hintergrund einbauen
- Runde Ecken selbst einbauen: iOS und Android schneiden die Ecken systemseitig ab – wer runde Ecken ins Icon zeichnet, bekommt doppelt abgerundete Ecken
- Text im Icon: Ab 48×48 px ist Text nicht mehr lesbar – Icons müssen als Symbol funktionieren
- Zu komplexes Design: Was groß gut aussieht, wird klein zu einem unlesbaren Klumpen – immer in der kleinsten Zielgröße testen
- Falsches Format: PNGs werden von allen Plattformen unterstützt – JPEGs haben keine Transparenz und eignen sich nicht für Icons
Tipp
Workflow-Tipp: Ein Icon-Design in Figma, Illustrator oder Canva erstellen, als PNG in 1024×1024 px exportieren, dann mit dem Icon-Generator in alle Größen umwandeln. Fertig – spart Stunden gegenüber manueller Arbeit.
Passende Rechner