Adaptive Icons, iOS Splash Screens und Manifest-Fehler beheben. Nutzen Sie Progressiers kostenlose Tools, um Ihre PWA professionell zu gestalten.

Inhalt entdecken

1 Die Last der Betriebssysteme: Wie PWA-Entwicklung zur Asset-Schlacht wird
2 Maskierbare Icons: Der Schlüssel zum adaptiven Startbildschirm
3 Die iOS-Assets: So bezwingen Sie Apples Auflösungsflut
4 Professionelle Präsentation: Screenshots ohne Grafikdesigner
5 Tipps: Vermeiden Sie die „Any Maskable“-Falle
6 Basis-Infos: Die kostenlose PWA-Toolbox
7 Die Tools in der Übersicht
8 Fazit: Die PWA-Entwicklung ist jetzt für alle zugänglich
- 8.1 Quellen der Inspiration

Die Last der Betriebssysteme: Wie PWA-Entwicklung zur Asset-Schlacht wird

Progressive Web Apps (PWAs) sind ein technisches Versprechen: eine einzige, installierbare Anwendung, die auf allen Geräten einheitlich funktioniert – ob auf dem Windows-PC, dem Android-Tablet oder dem Apple iPhone. Doch um dieses Versprechen einzulösen und eine PWA zu erstellen, die sich optisch nahtlos in native Umgebungen einfügt, müssen Entwickler eine erhebliche Menge an spezifischen Design-Assets bereitstellen. Die Betriebssysteme stellen dabei unterschiedliche, oft widersprüchliche Anforderungen an Icon-Größen, Auflösungen und Formatierungen. Wer diese Regeln nicht beachtet, sieht sein App-Symbol auf Android-Geräten womöglich in einem unschönen, isolierten weißen Kreis. Wer hingegen iOS bedienen möchte, muss Dutzende individueller Startbildschirme manuell erstellen, da Safari diese nicht automatisch generiert. Dieser fragmentierte Aufwand kostet Zeit und Ressourcen. Progressier bietet hierfür eine umfassende Palette an komplett kostenlosen Werkzeugen an, die diesen Asset-Albtraum beenden. Diese Tools funktionieren ohne jegliche Anmeldung oder Registrierung, liefern Ergebnisse ohne Paywalls und fügen den Exporten keine störenden Wasserzeichen hinzu. Sie ermöglichen es jedem, die hohen optischen Anforderungen der Plattformen effizient zu erfüllen und die PWA schnell in das native App-Erlebnis zu überführen. Damit wird der Weg frei, sich auf die eigentliche App-Logik zu konzentrieren, statt sich in der manuellen Verwaltung von Bilddateien zu verlieren.

Maskierbare Icons: Der Schlüssel zum adaptiven Startbildschirm

Seit der Einführung von adaptiven Icons mit Android 8.0 wird die Gestaltung von App-Symbolen komplexer. Ziel ist es, dass das Icon auf dem Startbildschirm die vom Hersteller oder Nutzer gewählte Form (Kreis, Squircle, etc.) annimmt und den gesamten verfügbaren Platz ausfüllt. Icons, die nicht für dieses adaptive Format vorbereitet sind, erscheinen auf Android in der Mitte eines weißen Quadrats oder Kreises. Die Lösung hierfür sind maskierbare Icons, die eine undurchsichtige Hintergrundfarbe und einen klar definierten sicheren Bereich benötigen. Der kostenlose Progressier Maskable Icon Generator hilft, diese Icons zu erstellen und sie vorab in den gängigen Masken (wie Apple, Google oder Samsung) zu prüfen. Entscheidend ist die Einhaltung der „Minimum Safe Area“ (minimal sicherer Bereich): Die wichtigsten Elemente des Logos müssen sich zwingend in einer kreisförmigen Zone im Zentrum befinden, deren Radius 40 Prozent der Gesamtbreite des Icons beträgt. Der äußere Rand von zehn Prozent kann auf manchen Plattformen abgeschnitten werden. Maskierbare Icons werden von modernen Systemen wie Android 10+, Chrome OS und macOS 14 Sonoma verwendet. Nur Windows nutzt für PWAs meist weiterhin das nicht-maskierbare Standard-Icon (purpose: "any"). Daher ist es ratsam, dem Manifest beide Icon-Typen hinzuzufügen, um auf allen Systemen visuelle Konsistenz zu gewährleisten.

Die iOS-Assets: So bezwingen Sie Apples Auflösungsflut

Für PWA-Entwickler ist die iOS-Plattform traditionell der größte Aufwand, wenn es um Design-Assets geht. Im Gegensatz zu Android, das einen Splash Screen (Ladebildschirm) automatisch aus den Manifest-Angaben generiert, verlangt Safari auf iOS die manuelle Erstellung eines individuellen Startbildschirms für jede erdenkliche iPhone- und iPad-Bildschirmgröße und -ausrichtung. Diese Liste umfasst Dutzende spezifischer Auflösungen, von den neuesten iPhone-Modellen bis hin zu unterschiedlichen iPad-Pro-Größen. Der PWA Icons & iOS Splash Screen Generator von Progressier löst dieses Problem, indem er nach dem Hochladen eines einzigen Bildes (empfohlen 512×512 Pixel, 1:1) alle benötigten iOS-Splash-Screens generiert und die korrekten HTML-Meta-Tags liefert. Diese Meta-Tags müssen Entwickler lediglich in den <head>-Abschnitt ihrer HTML-Vorlage kopieren. Das Tool wird kontinuierlich aktualisiert, um neue Apple-Geräte wie das iPad Pro 13″ M4 oder zukünftige iPhone-Modelle abzudecken. Es ist jedoch zu beachten, dass ein langjähriger Fehler in Safari dazu führen kann, dass im Querformat (Landscape) die Porträt-Splash-Screens verwendet und gestreckt werden, wofür es derzeit keine entwicklerseitige Lösung gibt.

Professionelle Präsentation: Screenshots ohne Grafikdesigner

Selbst wenn alle technischen Asset-Anforderungen erfüllt sind, entscheidet die visuelle Präsentation, ob Nutzer die PWA installieren. App-Screenshots sind essenziell, da sie während des Installationsvorgangs im Browser angezeigt werden. Obwohl optional, führt eine PWA mit Screenshots tendenziell zu mehr Installationen, da sie nativer wirkt. Für Entwickler ohne professionelle Grafikdesign-Erfahrung ist der PWA Screenshots Generator & Editor ein unverzichtbares, kostenloses Werkzeug. Das Tool, das seit 2022 verfügbar ist, bietet eine Vielzahl aktueller Gerätemockups, darunter iPhone 14, Google Pixel 6 sowie Desktop- und iPad-Frames. Es erlaubt die gleichzeitige Gestaltung von bis zu sieben Screenshots, das Hinzufügen von Text und das Anpassen des Hintergrunds. Eine besondere Funktion für PWAs ist die Möglichkeit, Screenshots direkt über eine URL abzurufen. Die technischen Anforderungen an die exportierten Bilder sind präzise: Die Breite und Höhe müssen zwischen 370 Pixel und 3840 Pixel liegen, und alle Screenshots in einem Set müssen dasselbe Seitenverhältnis aufweisen. Für eine zielgerichtete Präsentation kann im Manifest der platform-Parameter genutzt werden, um spezifische Screenshots für breite Geräte (wide, z. B. Desktop) oder schmale Geräte (narrow, z. B. Smartphones) zu definieren.

Tipps: Vermeiden Sie die „Any Maskable“-Falle

In der Konfiguration des PWA-Manifests existiert ein häufiges Anti-Pattern, das die visuelle Qualität des App-Symbols auf modernen Geräten untergräbt: die Kombination der Icon-Zwecke any maskable. Der purpose-Parameter im Icon-Array des Manifests definiert, wofür das Bild genutzt werden soll. maskable ist für adaptive Masken gedacht, während any für die allgemeine Verwendung steht. Chrome warnt explizit vor der Kombination any maskable, da es extrem unwahrscheinlich ist, ein Icon zu gestalten, das sowohl als Vollbild-Icon (any) als auch als perfekt zugeschnittenes Masken-Icon funktioniert. Das unerwünschte Ergebnis dieser Kombination ist oft ein unnötiges Padding (Abstand), das den eigentlichen Logo-Inhalt verkleinert. Die empfohlene Best Practice, die auch von Progressier unterstützt wird, besteht darin, zwei getrennte Icons im Manifest zu definieren, idealerweise beide in 512×512 Pixeln. Das eine Icon erhält den purpose: "maskable", ist randlos und füllt die Fläche aus, um auf dem Android-Startbildschirm, Chrome OS und macOS Sonoma optimal zu erscheinen. Das zweite Icon erhält den purpose: "any" und ist für Plattformen wie Windows gedacht, die keine Maskierung erzwingen.

Basis-Infos: Die kostenlose PWA-Toolbox

Progressier bietet folgende essenzielle Tools ohne Kosten, Wasserzeichen oder Registrierung an:

PWA Manifest Generator: Erstellt die notwendige JSON-Konfigurationsdatei. Erfüllt die Pflichtfelder name, short_name und start_url und ermöglicht die Konfiguration von background_color, theme_color und display.
PWA Icons & iOS Splash Screen Generator: Generiert aus einem einzigen Bild alle benötigten App-Icons und die Dutzenden von iOS-spezifischen apple-touch-startup-image Meta-Tags und Startbildschirmen.
Maskable Icon Generator: Hilft beim Erstellen von adaptiven Icons, indem er die 40-Prozent-Safe-Area visualisiert und Icons für Android, iOS und macOS Sonoma optimiert.
PWA Screenshots Generator & Editor: Erstellt hochauflösende Screenshots in aktuellen Geräte-Mockups (iPhone 14, Pixel 6, iPad) für App-Listings und den Installations-Prompt.
PWA Installation Testing Tool: Prüft, ob der aktuell verwendete Browser und das Gerät die Installation von PWAs unterstützen (unterstützt Safari, Chrome, Edge, Brave auf iOS, Android, macOS und Windows).
Push Notification Testing Tool: Ermöglicht die Installation einer Demo-PWA, um das Abonnieren und den Empfang von Web-Push-Benachrichtigungen auf dem Gerät zu testen.

Die Tools in der Übersicht

Progressier stellt eine Reihe leistungsfähiger, komplett kostenloser Tools bereit, die den Entwicklungsprozess von Progressive Web Apps (PWAs) vereinfachen.

Hier ist eine zusätzliche Vorstellung der wichtigsten kostenlosen Werkzeuge:

PWA Screenshots Generator & Editor

Erstellt kostenlose, hochauflösende Screenshots für App Stores (Google Play, App Store) und den PWA-Installations-Prompt.
Bietet aktuelle Gerätemockups wie iPhone 14, iPhone 13 und Google Pixel 6 ohne Wasserzeichen.
Erlaubt die Gestaltung von bis zu sieben Screenshots gleichzeitig mit benutzerdefiniertem Text und Hintergrundfarben.
Screenshots müssen dasselbe Seitenverhältnis haben und Größen zwischen 370 px und 3840 px aufweisen.

PWA Icons & iOS Splash Screen Generator

Generiert aus einem einzigen 1:1-Bild (empfohlen 512×512 Pixel) alle App-Icons und iOS-Startbildschirme.
Löst das Problem der manuellen Erstellung Dutzender spezifischer Splash Screens für jede iPhone- und iPad-Auflösung.
Liefert die notwendigen Meta-Tags für iOS (z. B. apple-touch-startup-image), die in den HTML-Header kopiert werden müssen.
Die Assets umfassen aktuelle Modelle, da das Tool bei neuen Apple-Geräten wie dem iPad Pro 13″ M4 aktualisiert wird.

Maskable Icon Generator

Ein kostenloses Online-Tool zur Erstellung adaptiver, maskierbarer PWA-Icons.
Stellt sicher, dass Icons auf Android 10+ und macOS Sonoma 14+ ohne den standardmäßigen weißen Hintergrund erscheinen.
Visualisiert die „Minimum Safe Area“ (40 % des Radius), um sicherzustellen, dass kritische Logoelemente sichtbar bleiben.
Ermöglicht die Vorschau, wie das Icon in verschiedenen Masken wie Kreis, Squircle oder Teardrop zugeschnitten wird.

PWA Manifest Generator

Erstellt und konfiguriert die notwendige JSON-Datei (manifest.json), die browserspezifische Informationen über die PWA liefert.
Beinhaltet die Konfiguration der Pflichtfelder wie name, short_name und start_url.
Ermöglicht die Anpassung des Erscheinungsbildes durch Eigenschaften wie background_color, theme_color und display.
Downloadet die fertige JSON-Datei zusammen mit den automatisch angepassten Icons.

PWA Installation Testing Tool (Installation Checker)

Prüft in Echtzeit, ob der aktuelle Browser und das Gerät die Installation von Progressive Web Apps unterstützen.
Testet die Installierbarkeit auf einer Vielzahl von Betriebssystemen, darunter iOS, Android, macOS und Windows.
Identifiziert die Kompatibilität von Browsern wie Safari (inkl. iOS 17+), Chrome, Edge, Brave und Samsung Internet.
Nützlich, um die Kriterien für das Erscheinen des „Add to Home Screen“-Prompts zu überprüfen.

Push Notification Testing Tool

Ermöglicht das Testen von Web-Push-Benachrichtigungen auf dem eigenen Gerät.
Leitet den Nutzer durch die Schritte: Installation der Demo-PWA, Abonnement der Push-Benachrichtigungen.
Bietet die Funktion, sich eine Testbenachrichtigung zu senden, um die Zustellung zu prüfen.
Hilft bei der Überprüfung der Funktionsweise des Push-Abonnements auf verschiedenen Plattformen.

Fazit: Die PWA-Entwicklung ist jetzt für alle zugänglich

Die Komplexität, eine Progressive Web App so zu konfigurieren, dass sie den hohen Standards moderner Betriebssysteme genügt, war lange eine unnötige Hürde. Die Notwendigkeit, Icons für Androids adaptive Masken vorzubereiten (Einhaltung der 40-Prozent-Regel) und gleichzeitig die Vielzahl an spezifischen iOS-Startbildschirmen zu bedienen, erforderte entweder spezialisiertes Wissen oder teure Lizenzen. Progressier hat diesen Prozess durch eine Reihe von intelligenten, kostenlosen Werkzeugen fundamental verändert. Der Maskable Icon Generator schützt Icons vor dem gefürchteten weißen Hintergrund, während der Splash Screen Generator die manuelle Asset-Pflege für Apple-Geräte überflüssig macht. Ergänzt wird dies durch den Screenshot Editor, der auch Laien in die Lage versetzt, App-Store-reife Visuals zu erstellen. Diese kostenlose Tool-Suite ebnet den Weg für eine Demokratisierung der PWA-Entwicklung. Entwickler erhalten alle notwendigen Mittel an die Hand, um eine technisch saubere und optisch ansprechende PWA zu bauen. Indem Progressier die oft fehleranfällige und zeitintensive Asset-Erstellung automatisiert, ermöglicht es den Entwicklern, sich auf die Kernfunktionalität ihrer Anwendung zu fokussieren und gleichzeitig eine konsistente, native Benutzererfahrung über alle unterstützten Plattformen hinweg sicherzustellen.