PWA, App-Icons & die Geschichte
der digitalen Identität

Eine ausführliche Reise durch vier Jahrzehnte Icon-Design — von Susan Kares 32×32-Bitmaps bis zu adaptiven Vektor-Layern auf Android 14 — und ein praktischer Leitfaden, wie du dein eigenes Icon in allen heute relevanten Formaten ausspielst.

~ 22 Minuten Lesezeit · Letzte Aktualisierung: Juni 2026

Prolog: Warum überhaupt ein Icon?

Wenn man genau hinschaut, ist ein App-Icon eine extreme Bedingungskunst. Es muss auf vier Quadratmillimeter eines Smartphones überzeugen, gleichzeitig auf einem 6K-Studio-Display lebendig wirken, in einem Mosaik aus dreißig anderen Apps nicht untergehen, eine Marke transportieren, einen Wiedererkennungswert für das beiläufige Hin-und-her-Wischen schaffen und im Kopf des Nutzers eine emotionale Verknüpfung herstellen. Es ist die kleinste Visitenkarte, die ein Produkt hat. Und obwohl sich die technischen Anforderungen alle zwei bis drei Jahre verschieben, hat sich an dieser Grundaufgabe seit den frühen 1980er Jahren erstaunlich wenig geändert.

Dieser Artikel ist sowohl eine kulturelle Spurensuche als auch ein technischer Leitfaden. Wir steigen ein bei den ersten Pixel-Symbolen am Apple Macintosh, machen die kuriose Wendung über das ursprüngliche iPhone — das anfangs gar keine native Apps haben sollte — durch, sortieren die heute notwendigen Plattform-Anforderungen, und enden mit einem konkreten Workflow, wie du aus einer einzigen Vektorquelle in unter dreißig Sekunden ein vollständig produktionsreifes Icon-Bundle bekommst.

Kapitel 1: 1983 – Susan Kare und der Mythos der 32×32-Bitmap

Als der Apple Macintosh 1984 in Cupertino vorgestellt wurde, war das verbaute Display gerade einmal 512 × 342 Pixel groß — monochrom, ohne Graustufen. Die einzige Möglichkeit, dem Nutzer ein „Programm" visuell anzubieten, war ein winziges Quadrat von 32 × 32 Punkten. Heute sind das die Maße einer Browser-Favicon-Datei. Damals waren es Mikrokosmen, in denen ganze Konzepte transportiert werden mussten. Apple stellte die Künstlerin Susan Kare ein, eine ausgebildete Bildhauerin ohne klassischen Programmier-Hintergrund. Sie kaufte sich Millimeterpapier, malte Pixel von Hand, und prägte Symbole, die heute, vierzig Jahre später, noch immer in vereinfachter Form überleben: der Lasso-Cursor, die Schere zum Ausschneiden, die Diskette zum Speichern.

Kare formulierte damals drei Designprinzipien, die für jedes Icon-System bis heute gelten. Erstens: Das Symbol muss auch dann erkennbar bleiben, wenn der Betrachter die Augen zusammenkneift. Zweitens: Es muss in extremer Vereinfachung funktionieren — also auch bei 16×16 in einer Toolbar — und gleichzeitig bei vergrößerter Darstellung nicht ärmlich wirken. Drittens: Metapher schlägt Wörtlichkeit. Eine Schere ist kein Foto einer Schere, sondern ein Konzept von „etwas ausschneiden". Diese drei Sätze sind der Grund, warum Susan Kares Arbeit heute im MoMA hängt — und warum jedes spätere Icon-System sie zitiert.

Kapitel 2: Die 1990er — Skeuomorphismus erobert das Symbol

Mit Mac OS 8 (1997) und Windows 95/98 stieg die verfügbare Farbtiefe von 1 Bit auf 256 Farben und dann auf TrueColor. Designer:innen wurden plötzlich zu Illustrator:innen. Aus dem Lasso-Cursor wurde eine plastisch gezeichnete Schere mit Schatten und Glanz; aus der Diskette ein dreidimensionales Pixelgemälde. Die Designsprache hieß Skeuomorphismus: die digitale Nachahmung physischer Gegenstände. Die Idee dahinter war pragmatisch: Wer das Internet 1996 zum ersten Mal benutzte, brauchte visuelle Anker. Eine Mülltonne, die wie eine Mülltonne aussieht, ist intuitiver als ein abstraktes Quadrat.

Apple trieb das Konzept mit der Einführung von Mac OS X im Jahr 2001 auf die Spitze. Steve Jobs' berühmtes Diktum lautete, die Buttons sollten so realistisch wirken, dass man sie „lecken möchte". Das Designteam unter Cordell Ratzlaff und später Bertrand Serlet schuf Aqua: glasige Knöpfe, gelartige Reflexe, fotorealistische Icons in 128×128 und später 512×512 Pixeln. Adobe Photoshop hatte ein Icon, das aussah wie ein Auge aus poliertem Glas. iTunes hatte eine CD mit echtem Lichtreflex. Die App-Icons waren plötzlich kleine Skulpturen.

Kapitel 3: 2007 — Das iPhone und die ironische Vorgeschichte der PWA

Es ist eine kuriose Pointe der Technikgeschichte, dass Progressive Web Apps — der heutige Goldstandard für plattformübergreifende Anwendungen — von Steve Jobs persönlich erfunden wurden. Am 11. Juni 2007, drei Wochen vor dem iPhone-Launch, eröffnete Jobs die jährliche WWDC mit einer beiläufigen Bemerkung: Entwickler sollten für das iPhone Anwendungen schreiben, die wie „Web 2.0 + AJAX" funktionieren. Es gab kein SDK, kein App Store, keinen Marktplatz. Die einzige offizielle Empfehlung war: Schreibt Web-Apps, die im Safari laufen, und nutzt die mobile Browser-Engine wie eine Anwendungsumgebung.

Diese Vision war ihrer Zeit dramatisch voraus — und zugleich völlig praxisuntauglich. Das mobile Safari von 2007 hatte weder Service Worker, noch Web Storage, noch eine Möglichkeit, Apps offline zu betreiben oder vom Homescreen zu starten. Die Entwicklergemeinde reagierte mit höflichem Schweigen und einem öffentlichen Aufstand. Innerhalb eines Jahres knickte Apple ein und launchte am 10. Juli 2008 den App Store mit nativen iOS-Apps in Objective-C. Die Web-App-Idee versank in der Bedeutungslosigkeit — vorerst.

Aber das iPhone hatte zwei Dinge zurückgelassen, die die Industrie für immer veränderten: ein Icon-Raster von 4×6 auf dem Homescreen — und eine ästhetische Tradition, in der die Icons abgerundete Quadrate mit weicher Innenkante waren, das sogenannte Squircle (eine Mischung aus Square und Circle, mathematisch eine Superellipse). Jedes spätere mobile Betriebssystem hat diese Konvention übernommen, modifiziert oder bewusst gebrochen — aber nie ignoriert.

Kapitel 4: 2008–2013 — Die Goldgrube der nativen Icons

Zwischen dem Launch des iOS App Store 2008 und der Vorstellung von iOS 7 im Juni 2013 lag die Hochzeit des skeuomorphen Mobile-Icon-Designs. Die Wettervorhersage-App auf iOS hatte ein perfekt simuliertes Sonne-Wolken-Diorama. Game Center hatte einen grünen Filztisch mit Spielkarten und Pokerchips. iBooks war ein Holzregal mit echter Maserung. Apps wie Convertbot oder Tweetie wurden zu Designer-Lieblingen, weil sie das fotorealistische Material-Spielen perfektioniert hatten.

Gleichzeitig wuchs auf der Android-Seite eine ganz andere Tradition heran. Google hatte mit der Veröffentlichung von Android 1.5 (Cupcake) im Jahr 2009 begonnen, ein eigenständiges Icon-System aufzubauen. Statt Squircles gab es bei Android beliebige Silhouetten — Roboter, Glühbirnen, abstrakte Buchstaben. Die App-Symbole hatten harte Außenkanten und durften aus dem Quadrat ausbrechen. Das wirkte auf iOS-Designer:innen damals chaotisch — und auf Android-Fans wie eine Befreiung vom Squircle-Diktat.

Mit Android 5 (Lollipop, 2014) führte Google dann Material Design ein, formuliert von Matías Duarte. Die Designsprache war flach, mit klaren Schatten, Materialebenen (Karten, Layer, Höhenstufen) und einer ganz neuen Icon-Philosophie: Die App-Symbole bekamen eine standardisierte Form, durften aber innerhalb ihrer Geometrie spielen. Eine Lupe war wieder eine Lupe — aber stilisiert, ohne Glanzeffekte, ohne Photorealismus.

Kapitel 5: iOS 7, der Flat-Schock und die Schweizer Schule

Im Juni 2013 stellte Jony Ive bei seiner ersten WWDC-Keynote als Chief Design Officer iOS 7 vor — und beerdigte zwölf Jahre Aqua-Tradition in zwei Stunden. Schatten verschwanden, Materialien wurden zu Farbflächen, Übergänge zu Blur-Effekten. Die App-Icons mussten alle neu gezeichnet werden. Die Wetter-App war jetzt ein Farbgradient mit minimalistischer Sonne. Mail war ein flacher weißer Umschlag. Die Designer-Welt war gespalten zwischen „endlich" und „Apple hat den Verstand verloren".

Der konzeptionelle Hintergrund war die Swiss School of Design: die Helvetica-Tradition von Max Bill und Josef Müller-Brockmann, die schon in den 1950ern argumentiert hatte, dass typografische Klarheit das Mittel zum Inhalt sein müsse, nicht das Spektakel. Ive zitierte sie explizit. Sechs Monate später folgte Microsoft mit Metro, das gleiche Prinzip, andere Färbung. Google blieb mit Material flach. Drei Jahre später war Skeuomorphismus eine Nische — überlebt nur noch in Nostalgie-Reissues und bewusst-retro Designs.

Kapitel 6: 2015 — „Progressive Web App" ist endlich ein Wort

Es war ein Blogpost im Juni 2015, der die Bewegung namengab. Alex Russell, damals Chrome-Entwickler bei Google, schrieb gemeinsam mit der Designerin Frances Berriman einen Beitrag mit dem Titel „Progressive Web Apps: Escaping Tabs Without Losing Our Soul". Darin formulierten die beiden ein Manifest: Web-Apps sollten installierbar sein, offline funktionieren, Push-Notifications empfangen können und sich wie native Anwendungen anfühlen — ohne dass man das Web als Plattform aufgeben müsste.

Die technische Grundlage dafür war ein Stack, der seit 2014 in den Browsern wuchs. Service Worker (Chrome 40, Januar 2015) erlaubten es, einen Proxy zwischen Browser und Netzwerk zu schalten, der Caching, Offline-Fallbacks und Background-Sync ermöglichte. Das Web App Manifest (W3C-Draft seit 2014) war eine JSON-Datei, die dem Browser sagte, wie eine Web-Anwendung als App präsentiert werden sollte: Name, Icons, Theme-Farbe, Startseite, Display-Modus. Die Push-API kam ein Jahr später, und der BeforeInstallPrompt-Event landete 2017 in Chrome.

Russells Pointe war klug: PWAs sollten progressiv sein, nicht binär. Eine Anwendung sollte im jeden Browser mindestens funktionieren — und in solchen, die PWA-Standards unterstützten, eben besonders gut. Kein „App Store oder nichts"-Zwang, kein Plattform-Lock-in, keine Installations-Hürde. Die Standard-Krönung kam 2018, als auch Apple zähneknirschend Service Worker im Safari 11.1 aktivierte. Acht Jahre nach Jobs' ursprünglicher Vision war die Web-App endlich Realität — nur dass sich heute kaum jemand erinnert, dass es ursprünglich Jobs' Idee war.

Kapitel 7: Adaptive Icons — Android 8 Oreo verändert die Spielregeln

Im August 2017 veröffentlichte Google Android 8 (Oreo) und brach damit konzeptuell mit allem, was zuvor war. Statt eines einzelnen quadratischen PNGs pro Density-Bucket bekamen Entwickler:innen nun einen neuen Iconformat-Typ: das Adaptive Icon. Das Icon besteht aus zwei Vektor-Layern, einem Vorder- und einem Hintergrund. Das Betriebssystem maskiert die Komposition dann je nach Hersteller-Skin — Samsungs One UI nutzt ein Squircle, Pixel-Stock-Android einen Kreis, OnePlus einen abgerundeten Kasten. Der Vorteil: Ein einziges Icon, das überall plattformkonform aussieht. Der Nachteil: Designer müssen mit einer 108-dp-Leinwand arbeiten, von der nur 66-dp Safe-Zone garantiert sichtbar sind. Wer Buchstaben oder feine Linien zu nah am Rand platziert, riskiert, dass sie weggeschnitten werden.

Apple zog 2017 nach, allerdings auf eine andere Art. Mit iOS 11 wurde der App-Icon-Workflow im Xcode-Asset-Catalog vereinheitlicht: AppIcon.appiconset. Statt 18 separater PNGs in willkürlichen Ordnern muss man jetzt einen einzigen Asset-Container füllen, mit einer Contents.json-Datei, die jede Größe-Idiom-Scale-Kombination definiert. Apple verlangt seitdem für den App-Store-Eintrag das 1024×1024-Icon explizit ohne Alpha-Kanal — was viele Erstentwickler in den ersten Wochen zur Verzweiflung treibt, weil ihr transparenter Hintergrund vom App Store Connect kommentarlos abgelehnt wird.

Kapitel 8: Das heutige Pflichtenheft

Wer 2026 eine plattformübergreifende App auf den Markt bringen will, hat es mit folgenden Pflichtgrößen zu tun — sortiert nach Häufigkeit der Vergessens-Fehler:

Progressive Web App (Web Manifest)

Der W3C-Standard verlangt mindestens ein 192×192- und ein 512×512-Icon. In der Praxis empfehlen sich zusätzlich 72, 96, 128, 144, 152 und 384 Pixel — vor allem für ältere Android-Versionen und Windows-Edge-Tiles. Maskable Icons (purpose: maskable) sind in zwei Größen Pflicht, wenn dein PWA auf Android wie ein natives Icon im Launcher angezeigt werden soll: Sie haben eine 10%-Safe-Zone-Padding, sodass das System nach Belieben maskieren kann.

iOS — AppIcon.appiconset

Apple verlangt für ein Universal-App-Bundle (iPhone + iPad) genau achtzehn PNG-Dateien plus eine Contents.json. Die Größen reichen von 20×20 für die Notification-Bar bis 1024×1024 für den App Store. Vier Punkte-Größen (20, 29, 40, 60 für iPhone; 20, 29, 40, 76, 83.5 für iPad) werden mit @2x und @3x multipliziert. Wer das App-Store-Icon vergisst oder mit Alpha-Channel hochlädt, bekommt eine Rejection-Mail mit dem Code ITMS-90717.

Android — Mipmap-Buckets + Adaptive Icons

Google trennt fünf Pixeldichten: mdpi (1x = 48px), hdpi (1.5x = 72px), xhdpi (2x = 96px), xxhdpi (3x = 144px) und xxxhdpi (4x = 192px). Pro Bucket braucht man ein ic_launcher.png und ein ic_launcher_round.png (für Geräte mit rundem Default-Maskenstil). Zusätzlich gehören in jeden Bucket ein ic_launcher_foreground.png (108-dp-Leinwand, hier in 108 / 162 / 216 / 324 / 432 px) plus zwei XML-Dateien in mipmap-anydpi-v26/, die die Adaptive-Icon-Komposition beschreiben. On top kommt das Play-Store-Listing-Icon mit 512×512 Pixeln, das im Console-Upload nochmal separat verlangt wird.

Apple Touch Icons (Web-Browser-Variante)

Wenn ein User eine Website auf seinem iOS-Homescreen ablegt, sucht Safari nach <link rel="apple-touch-icon">-Einträgen. Hier gehören neun Größen rein: 57, 60, 72, 76, 114, 120, 144, 152, 180. Die 180×180 ist der heute aktuelle Standard für moderne iPhones; die anderen sind Legacy-Fallbacks für ältere Geräte und Browser, die immer noch jemand zu nutzen scheint.

Kapitel 9: Designprinzipien, die bleiben

Trotz aller technischen Verschiebungen kristallisieren sich vier Designprinzipien heraus, die in jeder Ära funktionieren:

1. Ein einziges starkes Motiv. Ein Icon ist kein Plakat. Buchstaben funktionieren oft besser als Illustrationen — siehe Pinterest („P"), Behance („Bē"), Bitcoin („₿"). Wer eine Marke ohne ikonischen Buchstaben hat, muss eine geometrische Reduktion finden: ein Spiegel (Notes), eine Notenlinie (Music), ein Pfeil (Mail-Send).
2. Hoher Kontrast in der Mitte. Das Auge entscheidet im 1/10-Sekunden-Bruchteil, ob ein Icon „liest". Diese Entscheidung trifft die Mitte, nicht der Rand. Setze die wichtigste Form ins Zentrum, mit klarer Helligkeitstrennung zwischen Vorder- und Hintergrund.
3. Vermeide Text außer Logos. „Word" ohne das blaue W ist unkenntlich bei 48 Pixeln. Wenn dein Branding ein Wort ist, reduziere es auf den ersten Buchstaben oder ein Monogramm. Volltext-Icons funktionieren nur, wenn die Marke nur aus Text besteht (z.B. „IKEA", „GAP").
4. Plane für die kleinste Größe. Wenn dein 32×32-Icon nicht funktioniert, funktioniert dein 1024×1024 auch nicht — er wirkt nur größer. Designe bewusst von klein nach groß, nicht umgekehrt. Das war Susan Kares Lehre von 1983, und sie gilt heute, wo wir in 4K rendern, mehr denn je.

Kapitel 10: Vom Konzept zum produktionsreifen Bundle

Sagen wir, du hast jetzt einen Entwurf — eine Vektordatei (SVG, Figma-Export) oder ein hochauflösendes PNG mit mindestens 1024 × 1024 Pixeln. Die nächste Stufe ist der mühsame Teil: aus dieser einen Quelldatei dutzende exakt skalierte Varianten zu erzeugen, in der richtigen Ordnerstruktur und mit den korrekten Dateinamen. Genau dafür ist der JNRT-Pixel-Generator gebaut.

Drei Optionen stehen dir zur Auswahl, alle frei kombinierbar:

• PWA-Web (immer dabei): Acht Standard-PWA-Größen, optional zwei Maskable-Varianten, neun Apple-Touch-Icons, eine vollständige manifest.json und ein HTML-Snippet zum Einkopieren in den <head>.
• iOS (direkt mit iOS-Bundle starten): Vollständiges Xcode-AppIcon.appiconset mit allen 18 Größen für iPhone und iPad, automatisch generierter Contents.json, App-Store-Icon ohne Alpha-Channel.
• Android (direkt mit Android-Bundle starten): Fünf Density-Buckets mit Standard- und Round-Launcher, Adaptive-Icon-Foreground in jeder Density, XML-Dateien für mipmap-anydpi-v26, separate Hintergrundfarben-Resource, plus das 512×512-Play-Store-Listing-Icon.

Wenn du beide nativen Bundles auf einmal generieren willst, gibt es auch eine kombinierte Variante. Innerhalb des ZIPs findest du dann drei Top-Level-Ordner — icons/, ios/, android/ —, jeder mit eigenem README für die Integration.

Kapitel 11: Prefix, Suffix und Versionierung

Ein häufig unterschätztes Detail: Dateinamen. Wenn du parallel an mehreren Branding-Iterationen arbeitest oder ein Multi-Tenant-System pflegst, ist es Gold wert, eigene Prefix- und Suffix-Schemata zu definieren. Der Generator unterstützt das nativ. Setze v2_ als Prefix und _2026 als Suffix, und alle generierten Web-Icons heißen plötzlich v2_icon-192_2026.png — sortierbar, versioniert, automatisierbar.

Praktische Anwendungsfälle: A/B-Tests zweier Logo-Varianten parallel im selben Repo (a_ vs b_); zeitliche Versionierung (_q4-2026); Kunden-Branding (acme_ vs contoso_) bei White-Label-Setups. Die nativen iOS- und Android-Bundles ignorieren die Prefix/Suffix bewusst, weil dort die Dateinamen vom Build-System fest referenziert werden — Xcode erwartet Icon-1024.png, Punkt.

Kapitel 12: Testen, validieren, ausrollen

Drei Werkzeuge gehören in den Toolgürtel jedes PWA-Entwicklers:

• Chrome DevTools → Application → Manifest: Zeigt dir live, wie der Browser dein Manifest parst, welche Icons er findet, ob die Installierbarkeits-Kriterien erfüllt sind und welche Fehler im Manifest stecken.
• Lighthouse → PWA-Audit: Misst die Installability, Service-Worker-Konfiguration, HTTPS-Setup und Best-Practice-Checks. Eine PWA mit weniger als 90 Punkten wird vermutlich von Chrome nicht als installierbar angeboten.
• Maskable.app: Visualisiert dein Maskable-Icon in allen Android-Launcher-Masken (Kreis, Squircle, Tropfen, abgerundetes Quadrat). Unverzichtbar, um sicherzugehen, dass kein wichtiger Bildanteil im Safe-Zone-Rand verschwindet.

Auf der iOS-Seite reicht ein Test direkt in Xcode (Asset-Catalog → Cmd+R im Simulator) und ein Probe-Upload nach TestFlight, bevor du das App-Store-Review-Verfahren startest. Apple lehnt nichts schneller ab als ein Icon mit Transparenz oder mit von außen sichtbaren weißen Pixel-Rändern.

Kapitel 13: Ein Blick voraus

Wohin geht die Reise? Drei Trends zeichnen sich für die nächsten Jahre ab. Erstens: Animierte App-Icons. iOS hat mit dem Live-Activity-Feature (iOS 16, 2022) und den interaktiven Widget-Updates (iOS 17, 2023) die Tür geöffnet für Icons, die nicht statisch sind, sondern Zustände visualisieren — eine Wetter-App, deren Icon den aktuellen Himmel zeigt; eine Kalorien-App, deren Ring sich füllt. Zweitens: Dynamische Färbung. Android 12 (Material You) hat das Konzept eingeführt, Icons aus der vom Nutzer gewählten Wallpaper-Palette automatisch einzufärben. Material 3 verallgemeinert das jetzt. Wer monochrome Vektor-Layer mitliefert (android:monochrome), bekommt das gratis.

Drittens, und vielleicht am interessantesten: PWA holt nativ auf. Mit dem Web Push Standard im Safari (iOS 16.4, 2023), Window Controls Overlay, File System Access und der gerade laufenden Diskussion um Background Sync nähern sich die Web-Plattformen den nativen Möglichkeiten so stark an, dass die Frage „native oder PWA?" für die meisten Use-Cases schlicht hinfällig wird. Wer 2026 startet, wird vermutlich mit einer PWA beginnen — und nur dann auf native Stores ausweichen, wenn ein konkretes Feature (Hintergrund-Geofencing, ARKit, Apple Pay native) das wirklich erzwingt.

Epilog: Eine 50-Sekunden-Anleitung

Falls du nach dieser ausführlichen Geschichte das praktische Werkzeug gleich öffnen willst, hier dein direkter Weg:

Susan Kare hat 1983 das erste Apple-Icon auf Millimeterpapier gezeichnet, weil sie kein anderes Werkzeug hatte. Heute, vierzig Jahre später, läuft die gesamte Kette von Vektor zu plattformkonformem Bundle in unter einer Minute — und vollständig im Browser, ohne jeden Server-Upload. Wenn das kein Fortschritt ist.