App-Icons aus deinem Logo erstellen

App-Icon-Größen je Plattform im Jahr 2026

Jede Plattform verlangt ihr App-Icon in anderen Dimensionen und Seitenverhältnissen und wendet eigene Masken an. Das brauchst du für die wichtigsten Plattformen:

Apple hat sein Icon-System 2025 überarbeitet. Mit iOS 26 und macOS Tahoe erhielten Icons den Liquid-Glass-Look, und Xcode 26 brachte Icon Composer mit – ein Werkzeug, das eine mehrschichtige .icon-Datei für alle Apple-Plattformen baut. Ein solches Icon kann in mehreren Stilen dargestellt werden: Standard, Dunkel, Transparent und Getönt, die letzten beiden jeweils in hellen und dunklen Varianten.

Ein flaches Standard-PNG funktioniert weiterhin einwandfrei. Laut Xcode-Dokumentation können iOS-Apps alle benötigten Icon-Größen aus einer einzigen 1024 × 1024 px Grafik ableiten, und das ist nach wie vor der Standard für neue Icons. Du kannst eigene dunkle und getönte Varianten hinterlegen oder das System die Anpassung automatisch vornehmen lassen. Icon Composer ist optional – nutze es, wenn du volle Kontrolle über die Glasschichten möchtest.

Logobundles Komplettpaket enthält die flachen Bilddateien aus der Tabelle oben: app-icons/ios/icon-1024.png, die drei Android-Ebenen mit 432 px, playstore-512.png sowie icon.ico, icon.icns und 256- und 512-px-PNGs unter app-icons/desktop/. Eine Icon-Composer-Datei oder separate Dark/Tinted-Spezialvarianten für iOS sind nicht enthalten.

iOS: Ein deckendes Quadrat

Das iOS-Icon ist ein vollflächiges Quadrat ohne Transparenz und ohne abgerundete Ecken. iOS schneidet die Ecken im Betriebssystem selbst ab – zeichnest du abgerundete Ecken selbst ein, erscheint dein Motiv als kleinere Kachel mit dünnem Rand innerhalb der Systemform.

✓

Deckendes Quadrat, nur Symbol

✗

Transparentes PNG, schwarz gefüllt

Logos werden häufig mit transparentem Hintergrund exportiert – genau das führt zum Problem auf der rechten Seite. Xcode und App Store Connect verweigern ein 1024-px-Icon mit Alphakanal mit der Fehlermeldung „Invalid large app icon“. Gelangt ein transparentes Icon dennoch auf ein Testgerät, füllt iOS transparente Bereiche erfahrungsgemäß schwarz auf. Die dunkelblauen Linien und der Name des Wals verlieren so fast jeden Kontrast; nur der helle Körper bleibt sichtbar.

Die Lösung: Eine bis an die Ränder deckende Hintergrundfarbe und das Speichern der Datei ohne Alphakanal. Ein schlichtes weißes Quadrat oder deine Markenfarbe funktioniert bestens. Die einzige Ausnahme ist das optionale dunkle Icon: Hier wünscht Apple einen transparenten Hintergrund, damit der systemeigene dunkle Grund durchscheinen kann.

Logobundles icon-1024.png wird ohne Alphakanal exportiert. Das Motiv füllt etwa 72 % des Quadrats aus – auf Weiß oder Fast-Schwarz, je nachdem, worauf die Logo-Umrisse besser wirken, oder auf der eigenen Hintergrundfarbe deines Logo-Badges. So bleibt ausreichend Abstand zu den abgerundeten Ecken. Beim Wal wurde nur das Bildsymbol verwendet; Logos mit Text erläutert, wann das sinnvoll ist.

Adaptive Android-Icons und die Safe Zone

Ein adaptives Android-Icon besteht aus zwei Ebenen: einem Vordergrund mit dem Motiv und einem Hintergrund, jeweils 108 × 108 dp groß. Der Launcher zeigt nur die inneren 72 dp an und schneidet diese zu einem Kreis, einem abgerundeten Quadrat (Squircle) oder einer herstellerspezifischen Form zu. Die äußeren 18 dp auf jeder Seite dienen Animationen wie Parallax- und Impulseffekten. Nur der zentrale Kreis mit 66 dp Durchmesser wird garantiert niemals abgeschnitten – dein Logo muss genau dort hineinpassen.

✓

Motiv in der Safe Zone

✗

Logo über die gesamte Ebene

Rechts füllt das Logo die gesamte Ebene aus – so wie es aussieht, wenn man eine quadratische Logo-Datei direkt als Vordergrund einbindet. Der Kreisschnitt kappt die Spitzen der Krone, und vom Namen „LION KING“ bleiben unten nur noch abgeschnittene Buchstabenfragmente „ON KI“ übrig. Eine Squircle-Maske schneidet etwas weniger ab, ein kleinerer Kreis noch mehr: Man kann nie vorhersagen, welche Maskenform ein Android-Gerät verwendet.

Links wurde die Grafik in die Mitte verkleinert: Krone und Mähne sind vollständig sichtbar, mit angenehmem Abstand zum Rand. Logobundles adaptive-foreground-432.png platziert das Motiv auf der mittleren Hälfte der Ebene (54 von 108 dp), also sicher innerhalb der 66-dp-Safe-Zone. Die Hintergrundebene ist eine solide Volltonfarbe. Für den Löwen wurde das Symbol ohne Text verwendet; der dunkle Hintergrund lässt die goldenen Konturen optimal zur Geltung kommen.

432 px entspricht der 108-dp-Ebene bei höchster Pixeldichte (xxxhdpi mit 4 px pro dp). Android Studio, Expo und flutter_launcher_icons können alle kleineren Dichten daraus automatisch ableiten.

Themed Icons: Die monochrome Ebene

Seit Android 13 können Nutzer App-Icons im System-Design (Themed Icons) aktivieren. Der Launcher stellt dann jedes Icon einfarbig passend zur Akzentfarbe des Hintergrundbilds dar, auf einer farblich abgestimmten hellen oder dunklen Fläche. Dafür verlangt Android eine dritte Ebene – die monochrome Ebene: dieselbe Grafik in einer einzigen Farbe auf transparentem Grund, ebenfalls 108 dp mit dem Motiv in der Safe Zone.

Android nutzt ausschließlich die Silhouette dieser Ebene, nicht deren Farben. Alles, was auf feine Farbnuancen oder Schatten angewiesen ist, geht verloren. Eine App ohne monochrome Ebene sticht mit ihren normalen Farben aus der Reihe der Themed Icons heraus. Laut Android-Dokumentation färbt Android ab Version 16 QPR 2 solche Icons automatisch ein – es ist daher deutlich besser, eine eigene saubere Ebene zu liefern, statt das System raten zu lassen.

Themed Icon, wie ein Launcher es einfärbt

Der Löwe zeigt, was bei detailreicher Grafik passiert: In Farbe halten die Goldschattierungen Krone und Mähne zusammen. Als flache Silhouette zerfällt die Krone in einzelne Zacken und die Mähne in lose Splitter. Als gekrönter Löwe ist es noch erkennbar, aber an der Grenze. Ein einfacheres Symbol mit klaren Volltonformen ergibt ein deutlich besseres Themed Icon.

Logobundles adaptive-monochrome-432.png wird aus der Schwarz-Weiß-Variante desselben Motivs generiert: weiß auf transparentem Grund in identischer Größe und Position wie der Vordergrund. Die Formen werden dabei nicht künstlich vereinfacht – prüfe das Icon daher vor dem Release in Originalgröße.

Icons für macOS und Windows

Vor macOS Tahoe zeigte macOS eine .icns-Datei exakt so an, wie sie gezeichnet war, ohne eigene Masken anzuwenden. Deshalb enthalten Mac-Icons ihre Kachelform direkt in der Datei: Apples Vorlage ist ein abgerundetes Quadrat von 824 px auf einer 1024-px-Leinwand mit transparentem Rand ringsum.

Logobundles icon.icns folgt dieser Vorgabe: das Motiv auf einer abgerundeten 824-px-Kachel mit einem Eckenradius von 185,4 px, zentriert auf einer transparenten 1024-px-Fläche. Die Datei enthält Größenstufen von 32 bis 1024 px.

macOS Tahoe (macOS 26) hat dies verändert: Es erwartet Icons in seiner eigenen Kachelform und schrumpft abweichende Icons Berichten zufolge ein, um sie auf eine graue Standardkachel zu setzen. Für Apps, die gezielt auf Tahoe ausgerichtet sind, lohnt sich der Bau im Icon Composer: Er kann das SVG deines Logos als Ebene übernehmen; Xcode baut das Mac-Icon dann aus derselben .icon-Datei wie das iPhone-Icon.

Windows sucht zunächst nach einer exakt passenden Icon-Größe und skaliert andernfalls von der nächstgrößeren Stufe herunter. Microsofts Mindestanforderung für ein .ico sind 16, 24, 32, 48 und 256 px – durch die 256-px-Ebene skaliert Windows immer nur nach unten. Logobundles icon.ico enthält 16, 24, 32, 48, 64, 128 und 256 px, alle sauber aus einem 256-px-Rendering abgeleitet, auf transparentem Grund (oder auf der Kachelfarbe deines Logo-Badges). MSIX-Apps für den Microsoft Store verlangen separate PNGs nach Größe und Farbschema – diese sind nicht im Paket enthalten.

Logos mit Text

Ein iPhone stellt Startbildschirm-Icons mit rund 60 Punkten dar – je nach Display-Pixeldichte entspricht das 120 oder 180 physischen Pixeln. Text, der in der großen Logo-Datei gestochen scharf wirkt, ist bei dieser Größe nur wenige Pixel hoch. Die beiden Icons unten wurden mit 120 px gerendert und Pixel für Pixel vergrößert.

✓

Nur Symbol, 120 px

✗

Ganzes Logo, 120 px

Der Wal füllt das Quadrat harmonisch aus und behält seine Form, auch wenn feine Linien der Fontäne nur noch ein bis zwei Pixel breit sind. Das Hammer-and-Home-Icon muss Haus, Hammer, zwei Zeilen Namen und einen Slogan in dasselbe Quadrat quetschen: Haus und Hammer belegen das obere Drittel, „HAMMER AND HOME“ ist noch mühsam lesbar, und „CONSTRUCTION & RENOVATION“ wird zu einem Pixelrauschen. Auf dem Smartphone-Display mit etwa einem Zentimeter Gesamtbreite ist auch der Hauptname kaum noch entzifferbar.

Logobundle prüft, wie viele Details das Gesamtlogo bei kleinen Größen einbüßt. Gehen zu viele Details verloren und existiert ein separates Bildzeichen, isoliert der Generator das Symbol für Favicons und App-Icons, und die README weist darauf hin. So geschah es beim Wal. Bei Hammer and Home blieb das Gesamtlogo erhalten, und die README warnt vor unleserlichem Text bei kleinen Größen. In solchen Fällen schneidest du das Symbol am besten vorab zu oder erstellst ein einfaches Monogramm, das du für die Icons durch Logobundle schickst. Der Favicon-Ratgeber zeigt dieselbe Problematik bei 16 px.

Lädst du ein fertiges Icon hoch – ein volles Quadrat in einer Volltonfarbe ohne abgerundete Ecken? Deaktiviere nach dem Upload einfach das Häkchen bei „Hintergrund entfernen“, damit diese Farbe als Icon-Hintergrund erhalten bleibt.

Icons in Expo, Flutter und Xcode einbinden

Die Dateien liegen als Standard-PNGs, ICO und ICNS vor und lassen sich in jeder Toolchain direkt verwenden. Kopiere sie in dein Projekt, etwa nach assets/icons/, und verweise in der Konfiguration darauf.

Expo (app.json)

{
  "expo": {
    "icon": "./assets/icons/icon-1024.png",
    "ios": {
      "icon": "./assets/icons/icon-1024.png"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/icons/adaptive-foreground-432.png",
        "backgroundImage": "./assets/icons/adaptive-background-432.png",
        "monochromeImage": "./assets/icons/adaptive-monochrome-432.png"
      }
    }
  }
}

Erstelle danach einen neuen nativen Build: Icons sind fester Bestandteil des App-Binaries, ein Over-the-Air-Update (OTA) ändert sie nicht.

Flutter (flutter_launcher_icons)

flutter_launcher_icons:
  image_path: "assets/icons/icon-1024.png"
  android: true
  ios: true
  remove_alpha_ios: true
  adaptive_icon_foreground: "assets/icons/adaptive-foreground-432.png"
  adaptive_icon_background: "assets/icons/adaptive-background-432.png"
  adaptive_icon_monochrome: "assets/icons/adaptive-monochrome-432.png"

Das Paket generiert alle Android-Dichten und iOS-Größen aus diesen Dateien. remove_alpha_ios dient als Absicherung; Logobundles iOS-Icon enthält ohnehin keinen Alphakanal.

Xcode und Android Studio

Öffne in Xcode Assets.xcassets, wähle AppIcon und stelle im Attribute Inspector für iOS auf Single Size. Ziehe icon-1024.png in das Bildfeld. Xcode leitet alle kleineren Auflösungen automatisch ab.

In Android Studio übernimmt das Image Asset Studio (Rechtsklick auf res, dann New → Image Asset) Vorder- und Hintergrundebene und erzeugt die Dichte-Ordner samt adaptivem XML. Prüfe, ob die monochrome Ebene ebenfalls im XML hinterlegt wird. Für Google Play lädst du playstore-512.png in der Google Play Console hoch. Google verlangt ein 32-Bit-PNG; Logobundles Datei ist standardmäßig voll deckend. Falls Play Console die Datei anmahnt, speichere sie mit Alphakanal neu ab, etwa per ImageMagick: magick playstore-512.png PNG32:playstore-512.png.

App-Icons von Hand erstellen

Du brauchst zunächst eine Vektorversion deines Logos. Liegt es nur als PNG vor, solltest du das PNG-Logo in SVG umwandeln; stammt es aus Gemini, zeigt der Gemini-Ratgeber, wie du es vorab bereinigst.

# Windows .ico aus einem quadratischen icon.svg
for s in 16 24 32 48 64 128 256; do rsvg-convert -w $s icon.svg -o $s.png; done
magick 16.png 24.png 32.png 48.png 64.png 128.png 256.png icon.ico

# macOS .icns (auf dem Mac) aus einem 1024-px-PNG mit eingezeichneter Kachel
mkdir icon.iconset
for s in 16 32 128 256 512; do
  sips -z $s $s mac-1024.png --out icon.iconset/icon_${s}x${s}.png
  sips -z $((s*2)) $((s*2)) mac-1024.png --out icon.iconset/icon_${s}x${s}@2x.png
done
iconutil -c icns icon.iconset

Manuelles Erstellen empfiehlt sich besonders, wenn das Icon mehr als nur dein Logo auf einem Quadrat sein soll: etwa eine individuelle Kachel mit Verlauf oder Textur, ein für kleine Größen verstärktes Symbol, separate Dark/Tinted-Varianten oder ein geschichtetes Liquid-Glass-Icon. Ein automatischer Generator setzt das Motiv auf einen neutralen Hintergrund – er ersetzt keinen Icon-Designer.