Zum Inhalt springen

App-Icons für iOS und Android erstellen

Wandeln Sie ein Bild in alle Größen für iOS, Android, PWA und Favicon um, inklusive Xcode-Asset-Catalog und Ebenen für Adaptive Icons, als ZIP-Datei in Ihrem Browser.

Icon-Grafik hier ablegenPNG, JPG, WebP oder SVG · ab 1024 × 1024 px am besten · bis zu 50 MB
Datei auswählenAuf Ihrem Gerät verarbeitet – wird nicht hochgeladen

Aus einem Bild werden 39 PNG-Icons für iOS, Android und das Web, dazu Contents.json, Adaptive-Icon-XML, favicon.ico und ein Web-Manifest, alles in Ihrem Browser erzeugt.

Läuft in Ihrem Browser · kein UploadSo funktioniert's

So verwenden Sie App-Icon-Generator

  1. 1

    Grafik hinzufügen

    Ziehen Sie ein quadratisches PNG, JPG, WebP oder SVG hinein, am besten 1024 × 1024 Pixel oder größer. Auch ein Logo mit transparentem Hintergrund funktioniert gut.

  2. 2

    Plattformen wählen

    Lassen Sie iOS, Android und Web & PWA aktiviert oder entfernen Sie das Häkchen bei Plattformen, für die Sie nichts veröffentlichen. Wählen Sie dann den vollständigen Xcode-Größensatz oder ein einzelnes 1024-px-Icon.

  3. 3

    Darstellung anpassen

    Legen Sie Innenabstand, Hintergrundfarbe und die Größe der Grafik in Adaptive und Maskable Icons fest. Prüfen Sie dabei die Hilfslinien der Sicherheitszone und die Launcher-Formen.

  4. 4

    ZIP herunterladen

    Klicken Sie auf ZIP herunterladen und kopieren Sie jeden Ordner in Ihr Projekt. Die enthaltene README erklärt, wohin jede Datei gehört.

Limits und Pro

Kostenlos und ohne Wasserzeichen: ein Quellbild bis 50 MB auf einmal, bis zu 44 PNG-Icons pro ZIP (standardmäßig 39, 5 weitere mit der Themed-Icon-Ebene), unbegrenzte Downloads.

Über App-Icon-Generator

Der App-Icon-Generator macht aus einem einzigen Bild den kompletten Icon-Satz, den eine mobile App oder Progressive Web App benötigt. Die Dateien sind so benannt und in Ordnern abgelegt, wie Xcode, Android Studio und Browser es erwarten. Sind alle Plattformen ausgewählt, enthält das ZIP 39 PNG-Dateien: 15 für den Asset-Katalog von iPhone und iPad einschließlich des 1024-px-App-Store-Icons, 15 Android-Launcher-Bilder in den Dichten von mdpi bis xxxhdpi, das 512-px-Icon für Google Play sowie 8 Web-Icons. Diese umfassen die Manifest-Größen 192 und 512 px, Maskable-Versionen, das apple-touch-icon mit 180 px und Favicons mit 16, 32 und 48 px.

Neben den Bildern erhalten Sie eine Contents.json für AppIcon.appiconset, die XML-Datei mipmap-anydpi-v26 für adaptive Icons ab Android 8 mit einer Hintergrundfarb-Ressource, eine favicon.ico mit drei Größen, einen icons-Block für manifest.webmanifest und die passenden HTML-Link-Tags. iOS-Dateien werden ohne Alphakanal geschrieben, weil Xcode App-Store-Icons mit Alphakanal ablehnt. Jede Größe wird in Halbierungsschritten aus einem 1024-px-Master verkleinert, damit kleine Icons scharf bleiben.

Das Tool gestaltet kein Icon und entfernt auch keinen Hintergrund. Für die Hintergrundebene des Adaptive Icons verwendet es eine einfarbige Fläche statt eines zweiten Bildes. Die Vorschauen als Squircle, Tropfenform und Kreis ahmen gängige Launcher nach. Jeder Handyhersteller zeichnet seine eigene Maske, prüfen Sie das Ergebnis deshalb auf einem echten Gerät.

Datenschutz

Ihre Grafik wird in diesem Browser-Tab mithilfe eines Canvas und eines lokalen Web Workers decodiert, skaliert und in das ZIP gepackt. Das Bild verlässt Ihr Gerät nicht, es wird nichts hochgeladen oder gespeichert.

Funktionen

Xcode-Asset-Katalog

AppIcon.appiconset mit Contents.json, allen Größen für iPhone und iPad und PNGs ohne Alphakanal.

Adaptive Android-Icons

Vordergrundebenen, Hintergrundfarb-Ressource, runde Icons, Themed-Ebene und das Play-Store-Icon mit 512 px.

PWA und Favicons

Manifest-Icons, Maskable-Versionen, apple-touch-icon, favicon.ico und fertige HTML-Tags.

App-Icon-Generator: Häufig gestellte Fragen

Welche Größe sollte mein Quellbild haben?
Verwenden Sie ein quadratisches Bild mit mindestens 1024 × 1024 Pixeln. Das ist die Größe des App-Store-Icons und die größte Datei im Satz. Kleinere Bilder funktionieren weiterhin, doch die großen Icons werden hochskaliert und wirken unscharf, worauf das Tool Sie hinweist. SVG-Dateien werden in voller Auflösung gezeichnet, sodass ein Vektorlogo in jeder Größe scharf bleibt.
Wohin kommen die Dateien in meinem Xcode-Projekt?
Öffnen Sie Assets.xcassets in Xcode, löschen Sie das vorhandene AppIcon-Set und ziehen Sie den Ordner ios/AppIcon.appiconset aus dem ZIP hinein. Alternativ ersetzen Sie den Ordner im Finder. Die Contents.json ordnet jede PNG-Datei ihrem Platz für iPhone, iPad oder App Store zu. Ab Xcode 14 können Sie stattdessen Single 1024 wählen und die kleineren Größen von Xcode erzeugen lassen.
Wie funktionieren adaptive Android-Icons?
Seit Android 8 besteht ein Launcher-Icon aus zwei Ebenen mit je 108 dp: einem Hintergrund, hier in Ihrer gewählten Farbe, und einem Vordergrund mit Ihrer Grafik. Der Launcher schneidet die mittleren 72 dp aus und wendet seine eigene Form an, etwa Kreis oder Squircle. Alles außerhalb des mittleren Kreises mit 66 dp kann daher verschwinden. Die Hilfslinien der Sicherheitszone zeigen beide Grenzen in der Vorschau.
Was ist ein Maskable Icon für eine PWA?
Ein Maskable Icon füllt das ganze Quadrat mit Hintergrund, damit Android es ohne weiße Ränder in jede Form schneiden kann. Browser garantieren nur den Kreis, der die mittleren 80 % des Bildes abdeckt, halten Sie Logos also innerhalb davon. Das ZIP enthält Maskable-PNGs mit 192 und 512 px. Der Manifest-Ausschnitt kennzeichnet sie neben den regulären Icons mit dem Zweck maskable.
Warum haben meine iOS-Icons eine Hintergrundfarbe?
Apple verlangt vollständig deckende App-Icons: Ein App-Store-Icon mit Alphakanal besteht die Prüfung nicht, und transparente Bereiche würden auf dem Home-Bildschirm schwarz erscheinen. Deshalb füllt das Tool die iOS-Icons, das apple-touch-icon, das Play-Store-Icon sowie die Adaptive und Maskable Icons mit Ihrer Hintergrundfarbe, selbst wenn transparente Web-Icons aktiviert sind.

Ähnliche Tools

Alle: entwickler-tools

Favicon-Generator

ICO-, PNG- und Manifest-Icons aus Bild, Text oder Emoji

SVG-PNG-Konverter

SVG als scharfes PNG ausgeben oder PNG zu SVG vektorisieren

Bildgröße ändern

Größe nach Pixeln, Prozent oder Vorgabe ändern – für viele Bilder

Farbpaletten & Kontrastprüfung

Paletten, Farbstufen, WCAG-Kontrast und Farbsehschwäche-Check