App-Icon-Regeln: Alphakanal und Größen für beide Stores

Du hast ein Logo und zwei App-Stores, und die Datei, die Apple zufriedenstellt, ist nicht die, die Google haben will. Es fällt im schlechtesten Moment auf: Der Build ist fertig, und der Upload scheitert immer wieder an einem Alphakanal.

Apple will ein quadratisches Icon mit 1024x1024 und deckendem Hintergrund. Play will ein 32-Bit-PNG mit 512x512, das technisch Alpha unterstützt, laut Googles eigener Design-Spezifikation aber keins nutzen soll. Und eine fertig aussehende Datei will keiner der beiden Stores – beide legen nach dem Upload ihre eigenen Ecken und Effekte drauf. Hier steht, was jeder Store verlangt und wie du beide Dateien aus einem Logo bekommst.

Apple: 1024 Pixel, quadratisch, nichts Durchscheinendes

Apples Human Interface Guidelines nennen als Layout-Größe des App-Icons für iOS, iPadOS und macOS 1024x1024 px, quadratisch, in sRGB, Gray Gamma 2.2 oder Display P3. Apples bevorzugter Weg ist inzwischen Icon Composer: Du importierst die Vordergrund-Ebenen und definierst den Hintergrund im Tool. Ein auf eine Ebene reduziertes Bild ist aber weiterhin erlaubt – Ebenen geben mehr Kontrolle, Pflicht sind sie nicht.

Wer zum ersten Mal einreicht, scheitert am Hintergrund. Apples Anweisung für eine importierte Hintergrund-Ebene ist unmissverständlich: vollflächig und deckend. Ein 1024-px-PNG mit transparentem Hintergrund ist kein gültiges App-Store-Icon – lade eins hoch, und App Store Connect antwortet mit ITMS-90717: Das App-Store-Icon darf weder transparent sein noch einen Alphakanal enthalten. Die Dark-Variante ist die einzige Ausnahme: Die sollst du laut Apple mit transparentem Hintergrund liefern, damit der Hintergrund des Systems durchscheint. Überall sonst entscheidest du, welche Farbe hinter deinem Zeichen sitzt, und backst sie ein.

Andere Apple-Plattformen ändern die Layout-Größe: watchOS 1088x1088 und visionOS 1024x1024, beide kreisrund maskiert, tvOS ein querformatiges 800x480. Und sie ändern die Methode: tvOS- und visionOS-Icons werden als geschichtete Image Stacks in Xcode zusammengesetzt, nicht im Icon Composer.

Google Play: 512 Pixel, Alpha erlaubt, Transparenz trotzdem ein Fehler

Das Store-Listing-Icon von Play ist ein 32-Bit-PNG mit Alpha, 512x512 px, sRGB, maximal 1024KB. Liest du nur das, sieht der transparente Freisteller, den du schon hast, völlig in Ordnung aus.

Googles Design-Spezifikation für Icons macht diese Tür wieder zu: Transparente Assets zeigen die Hintergrundfarbe der Google-Play-Oberfläche. Dein Zeichen schwebt dann auf der Fläche, die Play gerade rendert, und ein dunkles Logo verschwindet im Dark Mode. Googles Rat: Wähl eine Hintergrundfarbe, die zu deiner Marke passt.

Zwei weitere Play-Regeln: keine Badges oder Texte, die Ranking, Preis oder Play-Kategorien suggerieren – und das Store-Listing-Icon ist nicht das Launcher-Icon auf dem Gerät. Dieses Adaptive Icon arbeitet mit Ebenen von 108x108 dp, von denen nur die inneren 66x66 dp garantiert von keiner OEM-Maske beschnitten werden.

Beide Dateien aus einem Logo holen

Beide Dateien fangen beim Gleichen an: bei deinem Zeichen, sauber von allem getrennt, worauf es lag. Wenn dein Logo nur als JPEG vom Lieferanten oder als Foto von gedrucktem Briefpapier existiert, stell es erst frei, damit die Form mit einem echten Alphakanal isoliert ist. remover.bg löst das Zeichen vom Hintergrund und lässt dich im Editor eine Volltonfläche oder deine Markenfarbe dahinterlegen – genau der Schritt, mit dem du auf eine Ebene reduzierst, wie Apple es verlangt.

Die Reihenfolge, die funktioniert:

1. Entferne den Hintergrund, damit das Logo für sich steht. Prüf die Kanten gegen eine dunkle Farbe, nicht gegen Weiß – dünne Striche und Serifen verstecken ihre Fehler in einer weißen Vorschau.
2. Setz den Hintergrund auf deine Markenfarbe und exportier ein PNG. Behalte auch die transparente Version, für Pressekits und Favicons.
3. Platzier dieses PNG in deinem eigenen Design-Tool auf einer quadratischen Fläche und exportier es mit 1024x1024 für Apple und 512x512 für Play. Die Größenanpassung gehört dorthin, nicht in die Hintergrundentfernung.

Bei einem gescannten oder abfotografierten Logo deckt Logo freistellen die Sonderfälle ab, und der Guide zu transparenten PNGs erklärt, warum es sich lohnt, dieses Master zu behalten.

Ecken und Schatten den Stores überlassen

Play ist da eindeutig: Der Store rundet die Ecken selbst ab, mit einem Radius von 30 % der Icon-Größe, legt nach dem Upload seinen eigenen Schatten an und bittet dich, beides wegzulassen. Apple maskiert dein Quadrat ins abgerundete Rechteck des Systems und legt eigene Glanzlichter, Lichtbrechung und Transluzenz darüber – mit dem Hinweis, dass vormaskierte Ebenen diese Effekte stören und Kanten zackig aussehen lassen.

Also: keine vorgerundeten Ecken, kein Schatten, keine Fase, kein Glow. Diese Zurückhaltung gilt nur für Icons – bei einem Produktfoto ist es gerade ein realistischer Kontaktschatten, der verhindert, dass der Artikel aussieht, als wäre er aufgeklebt.

Weil beide Stores maskieren, halte den wichtigen Teil des Zeichens mittig. Apples Empfehlung: primäre Inhalte zentrieren, damit die Maske sie nicht abschneiden kann. Plays Keyline-Raster funktioniert anders, als die meisten annehmen: Es ist eine Positionierungshilfe, keine Begrenzung. Googles Anweisung lautet, die gesamte Fläche mit Artwork zu füllen, wo das geht, und nur dann auf die Keylines zurückzufallen, wenn die Form um ein Logo herum zur Marke gehört. Lässt du vorsichtshalber Rand, rendert dein Icon sichtbar kleiner als jedes Listing daneben.

Was der 30-%-Radius wirklich frisst, sind die Ecken – eine Wortmarke, die bis dorthin hineingeschoben ist, verliert ihre Enden. Auf den kreisrunden Masken von watchOS und visionOS verliert eine randlose Wortmarke den ersten und den letzten Buchstaben komplett.

Vor dem Upload

• Apple: 1024x1024 PNG, quadratisch, vollständig deckend, Ecken scharf lassen.
• Play: 512x512 32-Bit-PNG, maximal 1024KB, Hintergrund in Markenfarbe statt Transparenz, Ecken scharf lassen.
• Gleiches Artwork, gleiche Farben in beiden Stores: Nutzer sollen eine App erkennen, nicht zwei.
• Prüf beide in Thumbnail-Größe. Details, die bei 1024 lesbar sind, verschwinden bei 40 Pixeln.

Bring das Icon einmal in Ordnung, und es bleibt für jedes Release danach in Ordnung.