Was eine PWA an Icons wirklich braucht
Eine Progressive Web App (eine Website, die sich wie eine App zum Homescreen hinzufügen lässt) braucht nicht ein Icon, sondern viele: verschiedene Größen für verschiedene Geräte und Zwecke. Der PWA-Generator nimmt ein Bild und erzeugt daraus das komplette Set. Konkret sind das die Größen 72, 96, 128, 144, 152, 192, 384 und 512 Pixel — plus Sonderfälle, zu denen wir gleich kommen. Die Grundlagen, warum es diese Größen braucht, stehen im Beitrag PWA erstellen — Anleitung.
Schritt 1: jede Größe einzeln rendern
Für jede Zielgröße wird ein Canvas in genau diesen Maßen angelegt, das Quell-Bild hineingezeichnet und über toBlob() als PNG exportiert:
canvas.toBlob(blob => { ... }, "image/png");Acht Größen = acht Mal dieselbe kleine Operation. Weil PNG verlustfrei ist, bleiben die Icons scharf; und weil alles lokal läuft, verlässt das Logo den Rechner nicht.
Schritt 2: die maskable-Falle
Hier wird es interessant. Android legt über App-Icons je nach Hersteller verschiedene Formen — Kreis, abgerundetes Quadrat, Tropfen. Ein normales Icon, das bis an den Rand geht, wird dabei an den Ecken abgeschnitten. Die Lösung heißt maskable Icon: eine Variante mit extra Rand rundum — der safe zone —, sodass die Maske nur diesen Rand beschneidet und das Motiv immer vollständig bleibt.
Der Generator erzeugt deshalb für die wichtigen Größen (192 und 512 px) zusätzlich maskable Varianten mit reichlich Sicherheitsabstand — das Motiv sitzt kleiner und mittiger in der Fläche. Praktisch heißt das: Man legt das Icon nicht randfüllend an, sondern gibt ihm etwa 10–20 % Luft nach außen. Wer das vergisst, dessen Icon wird auf manchen Android-Geräten angeknabbert.
Schritt 3: die manifest.json schreiben
Damit der Browser die Icons einer PWA zuordnet, braucht es eine Manifest-Datei — eine JSON-Datei, die Name, Farben, Startseite und eben die Icon-Liste mit ihren Größen und Verwendungszwecken (purpose) beschreibt. Der Generator baut diese Datei automatisch mit den passenden Einträgen zusammen, inklusive der Unterscheidung zwischen normalen (any) und maskable Icons. Man bekommt sie fertig zum Einfügen — kein manuelles JSON-Tippen, keine vergessenen Kommas.
Schritt 4: alles bündeln
Am Ende steht ein ganzes Paket: acht bis zehn PNG-Dateien plus die manifest.json. Statt sie einzeln herunterzuladen, packt der Generator sie in ein ZIP-Archiv — im Browser, ohne Server. Wie diese Stapel-Bündelung technisch funktioniert, ist ein eigenes kleines Thema, das der Werkstatt-Bericht zur Stapelverarbeitung beleuchtet.
Was wir daraus gelernt haben
Zwei Dinge sind hängen geblieben. Erstens: Die eigentliche Arbeit steckt nicht im Skalieren (das ist ein Einzeiler), sondern in den Sonderfällen — maskable, Apple-Touch-Icon, die richtigen Manifest-Einträge. Wer nur die Standard-Größen erzeugt, hat 80 % der Arbeit gemacht und 100 % der Ärgernisse übrig gelassen. Zweitens: Ein Generator ist so gut wie sein Wissen über die Zielplattformen. Die Größen und die safe-zone-Regel sind kein Rechenproblem, sondern Plattform-Wissen, das aus Dokumentation und Ausprobieren kommt — genau die Art Detail, die ein Werkzeug wertvoll macht.