Les icônes d’application iOS semblent anodines jusqu’à la semaine de release : mauvaises dimensions en pixels, canal alpha accidentel sur l’asset marketing 1024 px, ou bitmap déjà « arrondi » qui entre en conflit avec le masque automatique de Xcode. Ce guide est une matrice de décision pour designers et référents assets côté front qui doivent livrer un dossier complet AppIcon.appiconset : tableau de correspondance des tailles (rôle → points → pixels), règles Contents.json, export sRGB, politique de transparence, règles de main superellipse / arrondi (gérées par le système), conventions de nommage, et validation par lot sur un Mac Apple Silicon — idéalement un Mac distant pour les passes nocturnes et les contrôles de type CI.
① Matrice tailles et rôles (cibles PNG en pixels)
Livrez des PNG carrés aux dimensions exactes ci-dessous. Xcode associe chaque fichier via Contents.json ; ne comptez pas sur le « Retina scaling » du catalogue d’assets pour corriger un master mal dimensionné. Gardez un master vectoriel ou haute résolution (grille de design 1024 px typique), puis dérivez les tailles — sur Apple Silicon, les passes de redimensionnement en série restent rapides grâce à la bande passante mémoire et aux pipelines natifs des outils d’export.
| Plateforme / rôle | Points (pt) | Échelle | PNG (px) | Fragment de nom typique |
|---|---|---|---|---|
| iPhone Notification | 20 | 2× / 3× | 40 × 40 / 60 × 60 | [email protected], @3x |
| iPhone Réglages | 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 Notification | 20 | 1× / 2× | 20 × 20 / 40 × 40 | [email protected], @2x |
| iPad Réglages | 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] ou [email protected] (aligné au générateur) |
Alignez la conversion couleur avec votre politique PNG globale dans le guide gestion couleur PNG sur Mac : sRGB et Display P3, afin que les lots d’icônes ne dérivent pas par rapport aux visuels marketing.
② Contrat Contents.json
AppIcon.appiconset/Contents.json est le contrat de passation entre design et Xcode. Chaque entrée du tableau images doit déclarer idiom (iphone, ipad, ios-marketing), size (chaîne en points, ex. "60x60"), scale ("1x", "2x", "3x") et filename. L’emplacement marketing 1024 utilise idiom: "ios-marketing" avec size: "1024x1024" et scale: "1x".
- Source de vérité unique : après dépôt des PNG, exécutez
plutil -lint Contents.jsonsur le Mac (local ou distant) pour attraper virgules traînantes et fautes de frappe avant la CI. - Pas de fichiers orphelins : chaque PNG du dossier doit être référencé ; chaque
filenamedoit exister sur le disque. - Versionnage : commitez le JSON avec les PNG pour que la question « quel schéma de catalogue ? » reste toujours lisible en diff.
③ Masque superellipse, canal alpha et livraison « plate »
iOS applique le masque en superellipse (rectangle aux coins « iOS ») au rendu. Livrez des PNG carrés avec le graphisme poussé jusqu’aux bords, sauf charte interne contraire ; pour la production App Icon, ne gravez pas le rayon de coin iOS dans le bitmap. Gardez logos et visages dans une zone de sécurité centrale pour éviter qu’un détail critique ne soit rogné par le masque système.
Canal alpha : l’icône marketing 1024×1024 pour l’App Store ne doit pas comporter de transparence — Apple rejette l’alpha sur cet emplacement. Pour les autres slots, préférez des icônes entièrement opaques sauf exception documentée ; les pixels semi-transparents accidentels viennent souvent d’exports « anti-aliasés » sur fond arrondi ou damier. Traitez l’« alpha inattendu » comme bloquant release et intégrez-le à la checklist ci-dessous. Pour une gouvernance alpha plus large sur les PNG, voir contrôle qualité PNG par lot (transparence, volumes) sur Mac distant.
④ Paramètres d’export exécutables (sRGB)
Standardisez ces paramètres entre Figma, Sketch, Affinity et Photoshop pour que chaque dérivée soit comparable :
| Paramètre | Valeur recommandée | Notes |
|---|---|---|
| Espace colorimétrique | sRGB (conversion à l’export, pas « non balisé au hasard ») | Cohérent avec les icônes web ; miroitez les mêmes préréglages que pour les slices UI PNG. |
| Profondeur de bits | 8 bits RGB(A) | Intermédiaires 16 bits OK avant réduction finale ; livrez en PNG 8 bits. |
| Noyau de redimensionnement | Bicubique / Lanczos (qualité élevée native à l’outil) | Ré-affinez légèrement les traits après downscale si nécessaire. |
| Master 1024 | Sans alpha ; fond opaque conforme à la marque | Validez avec les scripts de la section ⑥. |
⑤ Checklist d’acceptation (design + front)
| Contrôle | Méthode | Critère de réussite |
|---|---|---|
| Dimensions | Automatisé (sips -g pixelWidth -g pixelHeight ou ImageMagick identify) |
Chaque PNG correspond exactement à la matrice (±0 px). |
| Toile carrée | Visuel + script | Largeur = hauteur pour chaque fichier. |
| Alpha (marketing) | identify -format '%[channels]' ou inspection des chunks PNG |
1024×1024 sans alpha ; RGB seul. |
| Alpha (autres emplacements) | Histogramme / pixels ciblés | Pas de transparence accidentelle sauf spec ; pas de frange type damier. |
| Règle de masque | Revue design | Livraison carrée ; pas de bitmap de prod pré-arrondi ; glyphe critique dans la zone sûre. |
Contents.json |
plutil -lint + tableau croisé des noms de fichiers |
JSON valide ; chaque filename existe ; aucun PNG non référencé. |
| Intention sRGB | Ouverture dans Aperçu + préréglage d’export documenté | ICC embarqué ou conversion explicite selon la charte équipe. |
| Nommage | Regex en CI | Motif stable : Icon-App-<WxH>@<échelle>.png, aligné sur le JSON. |
⑥ Validation par lot sur puce M et Mac distant
Sur Apple Silicon, boucler sur une quinzaine de petits PNG est trivial ; le gain est la reproductibilité et l’exécution des contrôles pendant que le portable est fermé. Un Mac distant peut héberger les mêmes scripts sous des versions figées de macOS et des outils, comme le font les studios pour la QA PNG par lot.
Étape A — relevé des dimensions (dossier) :
for f in *.png; do
echo -n "$f "
sips -g pixelWidth -g pixelHeight "$f" 2>/dev/null | paste -sd ' ' -
done
Étape B — signaler l’alpha sur l’icône marketing : avec ImageMagick identify -verbose sur [email protected] (ou votre fichier 1024), vérifiez l’absence de canal alpha ; faites échouer le build si rgba apparaît.
Étape C — manifeste : produisez icons_manifest.csv avec chemin,l,h,octets,a_alpha,intention_couleur et joignez-le au ticket de release. Pour les grosses séries d’export qui entourent le travail sur les icônes, le guide export PNG 4K par lot sur Mac M4 distant décrit une discipline de file d’attente qui scale aux larges drops d’assets.
Parallélisation : en générant depuis un master 1024, lancez des redimensionnements indépendants en parallèle (xargs -P) — les machines M gèrent plusieurs sips ou outils CLI concurrents sur des rafales courtes sans sortir des plages thermiques habituelles.
Synthèse
Utilisez la matrice en pixels comme contrat de taille unique, gardez Contents.json linté et synchronisé avec les noms de fichiers, appliquez les paramètres sRGB partout, et considérez l’alpha sur l’icône marketing 1024 comme une erreur bloquante. Couplez la revue design (masque / zone sûre) à des contrôles scriptés par lot sur un Mac série M — de préférence un Mac distant dédié — pour que les livraisons d’icônes restent routinières et prêtes à shipper.
Suite : Mac distant pour la livraison design
Parcourez les offres sur la page d’accueil MacPng, puis ouvrez les options de location et les tarifs pour ajouter un nœud Mac distant dédié aux lots d’icônes, à la QA PNG et aux validations longues sans saturer votre poste principal. L’aide SSH/VNC couvre l’onboarding des équipes distribuées.
Livrez les icônes iOS et les jeux PNG depuis un Mac distant
Figez les versions macOS et CLI, enchaînez les exports par lot et la validation de nuit, et remettez des bundles AppIcon.appiconset avec manifestes — idéal pour les studios qui enchaînent les builds TestFlight.