iOS App-Icons wirken trivial – bis zur Release-Woche: falsche Pixelmaße, versehentlicher Alphakanal auf dem 1024 px Marketing-Asset oder eine bereits abgerundete PNG, die mit der automatischen Xcode-Maske kollidiert. Dieser Artikel ist eine Entscheidungsmatrix für Designer und Frontend-nahe Asset-Verantwortliche, die einen vollständigen Ordner AppIcon.appiconset liefern: Größenvergleichstabelle (Rolle → Points → Pixel), Regeln für Contents.json, sRGB-Exportabnahme, Transparenz-Policy, Superellipse-/Eckenmasken-Übergabe, Benennung sowie Batch-Validierung auf einem M-Serie-Mac – inklusive dediziertem Remote Mac für nächtliche Exporte und CI-ähnliche Checks.
① Größen- & Rollenmatrix (PNG-Pixelziele)
Liefern Sie quadratische PNGs in exakten Pixelmaßen wie in der Tabelle. Xcode mappt jede Datei über Contents.json; ein falscher Master lässt sich nicht zuverlässig durch „Retina-Skalierung“ im Asset-Katalog retten. Halten Sie einen Vektor- oder Hochauflösungs-Master (z. B. 1024 px Designraster), leiten Sie daraus alle Größen ab – auf Apple Silicon sind Batch-Resizes dank Speicherbandbreite und effizienter nativer Exportpfade schnell erledigt.
| Plattform / Rolle | Points (pt) | Skala | PNG (px) | Typischer Dateiname |
|---|---|---|---|---|
| iPhone Benachrichtigung | 20 | 2× / 3× | 40 × 40 / 60 × 60 | [email protected], @3x |
| iPhone Einstellungen | 29 | 2× / 3× | 58 × 58 / 87 × 87 | [email protected], @3x |
| iPhone Spotlight | 40 | 2× / 3× | 80 × 80 / 120 × 120 | [email protected], @3x |
| iPhone App | 60 | 2× / 3× | 120 × 120 / 180 × 180 | [email protected], @3x |
| iPad Benachrichtigung | 20 | 1× / 2× | 20 × 20 / 40 × 40 | [email protected], @2x |
| iPad Einstellungen | 29 | 1× / 2× | 29 × 29 / 58 × 58 | [email protected], @2x |
| iPad Spotlight | 40 | 1× / 2× | 40 × 40 / 80 × 80 | [email protected], @2x |
| iPad App | 76 | 1× / 2× | 76 × 76 / 152 × 152 | [email protected], @2x |
| iPad Pro App | 83,5 | 2× | 167 × 167 | [email protected] |
| App Store / Marketing | 1024 | 1× | 1024 × 1024 | [email protected] oder [email protected] (an Generator anpassen) |
Farbumrechnung und ICC-Politik sollten mit Ihrem übergreifenden PNG-Handbook konsistent sein – siehe Mac PNG-Farbmanagement: sRGB vs. Display P3, damit Icon-Batches nicht von Marketing-Stillleben abweichen.
② Contents.json als Übergabevertrag
AppIcon.appiconset/Contents.json ist der Vertrag zwischen Design und Xcode. Jeder Eintrag im Array images benennt idiom (iphone, ipad, ios-marketing), size (Point-String z. B. "60x60"), scale ("1x", "2x", "3x") und filename. Der Marketing-Slot 1024 nutzt idiom: "ios-marketing", size: "1024x1024", scale: "1x".
- Single Source of Truth: Nach dem Ablegen der PNGs auf dem Remote Mac
plutil -lint Contents.jsonausführen – schließt nachlaufende Kommas und Tippfehler vor CI aus. - Keine Waisen: Jede PNG im Ordner ist referenziert; jeder
filename-Eintrag existiert physisch. - Versionierung: JSON zusammen mit PNGs committen, damit das Katalog-Layout diffbar bleibt.
③ Superellipse-Maske, Alpha & „flache“ Lieferung
iOS wendet die abgerundete Rechteck-Maske (Superellipse) zur Laufzeit an. Liefern Sie vollflächig quadratische PNGs mit Motiv bis an den Rand, sofern Ihr Team keine abweichende interne Vorlage nutzt; keine fest eingebaute iOS-Eckenradien in Produktions-App-Icons. Logos und Gesichter bleiben in einer zentralen Safe Zone, damit die Maske nichts Wichtiges abschneidet.
Alphakanal: Das App-Store-Marketing-Icon 1024×1024 darf keine Transparenz haben – Apple lehnt Alpha dort ab. Für kleinere Slots sind voll deckende Icons vorzuziehen, sofern keine dokumentierte Ausnahme gilt; halbtransparente Pixel entstehen oft durch Kantenglättung auf „abgerundeten“ Exporten oder Schachbrett-Hintergrund. „Unerwartetes Alpha“ = Release-Blocker – siehe auch OpenClaw PNG-QA: Batch-Transparenz auf Remote Mac für übergreifende Alpha-Governance.
④ Ausführbare Exportparameter (sRGB)
Diese Parameter teamweit in Figma, Sketch, Affinity und Photoshop vereinheitlichen:
| Parameter | Empfohlener Wert | Hinweis |
|---|---|---|
| Farbraum | sRGB (konvertierter Export, kein „untagged guess“) | Eingebettete ICC-Politik wie bei Web-Icons; gleiche Presets wie für UI-PNG-Slices. |
| Bit-Tiefe | 8-Bit RGB(A) | 16-Bit-Zwischenschritte vor dem finalen Downscale erlaubt; Lieferformat 8-Bit-PNG. |
| Skalierungsfilter | Bikubisch / Lanczos (tool-native „hohe Qualität“) | Feine Linien nach Downscale bei Bedarf leicht nachschärfen. |
| 1024-Master | Kein Alpha; deckender Markenhintergrund | Mit Skripten aus Abschnitt ⑥ verifizieren. |
⑤ Abnahme-Checkliste (Design + Frontend)
| Prüfpunkt | Methode | Pass-Kriterium |
|---|---|---|
| Abmessungen | Automatisiert (sips -g pixelWidth -g pixelHeight oder ImageMagick identify) |
Jede PNG exakt wie Matrix (±0 px). |
| Quadratische Fläche | Sichtprüfung + Skript | Breite = Höhe für jede Datei. |
| Alpha (Marketing) | identify -format '%[channels]' oder PNG-Chunk-Prüfung |
1024×1024 ohne Alpha, nur RGB. |
| Alpha (übrige Slots) | Histogramm / Spot-Pixel | Keine versehentliche Transparenz außer Spez.; keine Schachbrettränder. |
| Masken-Policy | Design-Review | Quadratische Lieferung; keine vorgeformten Produktions-Bitmaps; kritische Zeichen in Safe Area. |
Contents.json |
plutil -lint + Dateinamen-Crosswalk |
Gültiges JSON; jeder filename existiert; keine unreferenzierten PNGs. |
| sRGB-Intent | Vorschau + dokumentiertes Export-Preset | Eingebettet oder explizit konvertiert gemäß Team-ICC-Policy. |
| Benennung | Regex in CI | Stabiles Muster: Icon-App-<WxH>@<scale>.png, konsistent mit JSON. |
⑥ Batch-Validierung auf M-Serie & Remote Mac
Auf Apple Silicon ist das Durchlaufen von ~15–20 kleinen PNGs trivial; der Gewinn liegt in Wiederholbarkeit und Checks, während der Laptop aus ist. Ein Remote Mac kann dieselben Skripte unter fixierter macOS- und Tool-Version hosten – analog zu Studios, die Batch-PNG-QA pinnen.
Schritt A – Maße im Ordner:
for f in *.png; do
echo -n "$f "
sips -g pixelWidth -g pixelHeight "$f" 2>/dev/null | paste -sd ' ' -
doneSchritt B – Alpha am Marketing-Icon: ImageMagick identify -verbose auf [email protected] (oder Ihre 1024-Datei) – Build fehlschlagen lassen, wenn rgba erscheint.
Schritt C – Manifest: icons_manifest.csv mit Spalten path,w,h,bytes,has_alpha,colorIntent erzeugen und ans Release-Ticket hängen. Für hohen Durchsatz um Icon-Arbeit herum liefert 4K-PNG-Batch-Export auf Remote Mac M4 Queue-Disziplin für große Asset-Drops.
Parallelität: Von einem 1024-Master aus unabhängige Resize-Jobs parallel starten (xargs -P) – M-Serie-Rechner verkraften kurze parallele sips- oder CLI-Läufe gut innerhalb thermischer Normen.
Kurzfassung
Die Pixel-Matrix ist der einzige Größenvertrag, Contents.json bleibt gelintet und dateisynchron, sRGB-Exportparameter sind toolübergreifend fixiert, Alpha auf dem 1024-Marketing-Icon ist hartes Fail. Design-Review (Maske/Safe Zone) plus skriptgestützte Batch-Checks auf einem M-Serie-Mac – idealerweise Remote Mac – halten Icon-Drops langweilig und lieferfähig.
Nächste Schritte: Remote Mac für Design-Ablieferung
Pakete und Szenarien auf der MacPng-Startseite prüfen, dann Miet- und Kaufoptionen sowie Preise & Knoten öffnen – für einen Remote-Mac-Knoten, der Icon-Batches, PNG-QA und lange Validierungen übernimmt, ohne Ihren Hauptarbeitsplatz zu blockieren. Die Hilfe erklärt SSH/VNC-Onboarding für verteilte Teams.
iOS-Icons & PNG-Sets vom Remote Mac aus liefern
macOS- und CLI-Tool-Versionen pinnen, nächtliche Batch-Exporte und Validierung fahren, AppIcon.appiconset-Bundles inkl. Manifest abgeben – ideal für Studios mit häufigen TestFlight-Builds.