Ein Quellbild vorbereiten, das in jeder Größe funktioniert
Ein gutes App-Icon muss vom winzigen 16 × 16 Browser-Favicon bis zum großen 512 × 512 Store-Listing-Bild erkennbar bleiben. Beginnen Sie mit einem quadratischen Quellbild, vorzugsweise mit 1024 × 1024 Pixeln oder mehr, und platzieren Sie ein einfaches, kontrastreiches Zeichen in der Mitte.
Vermeiden Sie kleine Texte, dünne Umrisse und visuelle Details, die nur in großen Größen funktionieren. Sie verschwinden häufig, wenn der Browser oder das Betriebssystem Ihr Icon in kleinen Abmessungen rendert. Wenn Ihr Logo rechteckig ist, platzieren Sie es zuerst auf einer quadratischen Fläche, statt es zu strecken.
- Verwenden Sie PNG, wenn Ihr Originalmotiv Transparenz oder scharfe Logo-Kanten enthält.
- Halten Sie das zentrale Zeichen mittig und lassen Sie sichtbar ausreichend Freiraum darum.
- Verwenden Sie eine einfarbige Hintergrundfarbe, wenn Sie auch iOS-Ausgabe benötigen.
- Prüfen Sie die kleinste Favicon-Größe, bevor Sie das endgültige Paket herunterladen.
Web-Favicons, Apple-Touch-Icons und PWA-Manifest-Icons
Der Web/PWA-Export deckt die Browser- und installierbaren Web-App-Ressourcen ab, die üblicherweise in einem public-Ordner benötigt werden. Er enthält PNG-Favicon-Größen für moderne Browser, eine optionale favicon.ico für eine breitere Kompatibilität mit älteren Systemen und ein Apple-Touch-Icon für iOS-Startbildschirm-Lesezeichen.
Für installierbare PWAs enthält das Paket außerdem Manifest-Icons in 192 × 192 und 512 × 512. Wenn Sie die maskierbare Option aktivieren, wird ein Icon hinzugefügt, das wichtige Motive bewahren soll, wenn ein Gerät eine eigene Icon-Form anwendet.
Manifest-Konfiguration ist enthalten, keine vollständige PWA-Implementierung
Die generierte site.webmanifest und das Head-Tag-Snippet beschleunigen die Icon-Einrichtung. Ihre App benötigt weiterhin die übrige PWA-Konfiguration, beispielsweise einen passenden Service Worker und die Anforderungen für die Installierbarkeit.
Android-Launcher- und Adaptive-Icon-Ressourcen
Android-Geräte verwenden dichteabhängige Launcher-Ressourcen, damit das Betriebssystem für jede Bildschirmdichte ein passendes Bild auswählen kann. Der Android-Export organisiert diese Dateien in den üblichen res/mipmap-*-Verzeichnissen und kann runde Launcher-Varianten sowie ein 512 × 512 Play-Store-Listing-Icon enthalten.
Adaptive Icons sind native Android-Launcher-Ressourcen, die Vordergrund- und Hintergrundebenen über XML-Definitionen kombinieren. Im Ein-Bild-Modus erstellt dieser Generator kompatible abgeleitete Ressourcen aus Ihrem Quellbild und der ausgewählten Hintergrundfarbe.
Wichtig: Adaptive Icons trennen das Motiv nicht automatisch
Ein einzelnes flaches Bild kann nicht zuverlässig in ein wirklich bearbeitbares Logo im Vordergrund und eine unabhängige Hintergrundebene aufgeteilt werden. Platzieren Sie Ihr Logo mittig und lassen Sie großzügigen Innenabstand für das beste Ergebnis. Für markentreue Adaptive Icons verwenden Sie separat gestaltete Vordergrund- und Hintergrundmotive in Ihrem Android-Projekt.
iOS AppIcon.appiconset für Xcode
Der iOS-Export erstellt einen AppIcon.appiconset-Ordner für einen Xcode-Asset-Katalog. Er enthält die für iPhone, iPad und App Store erforderlichen Bildvarianten sowie eine Contents.json-Datei, die jedes generierte Bild dem erwarteten Gerätetyp, der Punktgröße und dem Skalierungsfaktor zuordnet.
iOS-App-Icons werden auf die ausgewählte Hintergrundfarbe reduziert. Dadurch wird eine transparente Icon-Ausgabe vermieden und das generierte Asset-Set bleibt mit den üblichen Anforderungen für App-Store-Icons kompatibel.
- Runden Sie Ihr Motiv nicht vorab ab; iOS wendet eine eigene Icon-Maske an.
- Verwenden Sie eine Hintergrundfarbe, die zu Ihrer Produktidentität passt.
- Ziehen Sie AppIcon.appiconset in Assets.xcassets und wählen Sie es anschließend als App-Icon-Set für das Ziel aus.
- Prüfen Sie das generierte Icon in Xcode, bevor Sie einen Build einreichen.
Maskierbare PWA-Icons und Android Adaptive Icons
Diese beiden Begriffe lassen sich leicht verwechseln, weil sich beide mit systemgesteuerten Icon-Formen befassen. Sie sind jedoch nicht austauschbar.
Ein maskierbares Icon ist eine Bilddatei für das Web-App-Manifest, die installierten PWAs zusätzlichen sicheren Raum für Launcher-Masken bietet. Ein Android Adaptive Icon ist eine native Android-Ressource aus Vordergrund- und Hintergrundebenen sowie XML-Referenzen. Aktivieren Sie beide, wenn Sie eine PWA und eine native Android-App veröffentlichen, verwenden Sie jedoch jeden Dateityp in der jeweiligen Plattformkonfiguration.
Ihr Quellbild bleibt in Ihrem Browser
Dieses Szenario ist für browserbasierte Bildverarbeitung konzipiert. Das Quellbild wird lokal im Browser transformiert, statt auf einen entfernten Bildverarbeitungsserver hochgeladen zu werden. Das ist besonders nützlich, wenn Sie noch unveröffentlichte Produktgrafiken, Kundenlogos oder interne App-Ressourcen vorbereiten.
Die Seite selbst lädt weiterhin Anwendungscode und Verarbeitungsressourcen von der Website. Lokale Verarbeitung bedeutet, dass die Bilddaten nicht für eine serverseitige Konvertierung übertragen werden müssen.
