Les icônes macOS échouent souvent sans bruit : une paire @2x manquante, une faute de nom qui bloque iconutil, ou un master Display P3 qui désature dans Xcode. Pour les équipes qui livrent un .iconset auditable et un .icns compilé, ce guide propose une table de formats, la grille contractuelle des tailles PNG, une checklist sRGB/ICC, des exemples sips / iconutil et une FAQ sur les coins arrondis et les bords alpha. Poursuivez sur le blog design & workflow avec la checklist PNG sRGB / Display P3, le volet métadonnées ICC et recompression sans perte, et la matrice icônes d’app iOS lorsque bureau et mobile partagent la même campagne graphique.
Sommaire
Pourquoi les lots d’icônes cassent en production
Trois familles de risques reviennent dans presque chaque release : contrat de nommage, dérive colorimétrique, et surprises sur l’alpha. Les traiter comme des bloquants évite les allers-retours entre design et build, surtout lorsque plusieurs variantes d’application partagent une même chaîne d’assets.
Contrat de fichiers
iconutil est strict : un mauvais couple « nom / pixels » fait échouer la compilation avec peu de contexte côté design. Les revues doivent donc inclure une assertion automatique des dimensions, pas seulement un contrôle visuel rapide.
Dérive entre P3 et sRGB
Des masters larges gamme à côté d’interface figée en sRGB séparent les jaunes de marque entre Dock, barre de menus et captures marketing. Alignez la politique ICC avec celle des PNG produit décrite dans nos guides couleur.
Alpha et franges
Des bords doux passent sur fond damier puis deviennent boueux sur le bureau réel. Couplez ce volet à une QA PNG par lot lorsque vous industrialisez les contrôles sur Mac distant.
Matrice de décision ICNS vs .iconset
| Artefact | Cas d’usage principal | Revue / diff | Consommateur typique |
|---|---|---|---|
Dossier .iconset |
Source de vérité PNG, revue PR, rerenders partiels | Excellente (diffs par taille dans Git) | Designers, release managers, flux Xcode |
Fichier .icns |
Binaire prêt à l’emploi pour outils « classiques » | Pauvre (binaire opaque) | Apps héritées, certaines CI, hors Xcode |
En cas de doute, considérez le dossier comme canonique et regénérez l’ICNS dans la CI ou un job nocturne sur un hôte Apple Silicon, afin que les flags et chemins restent reproductibles d’une release à l’autre.
Cibles PNG requises dans le .iconset
Apple attend un PNG carré pour chaque emplacement ci-dessous. Partez d’un master 1024×1024 en sRGB, puis dérivez la grille ; ce tableau constitue le contrat d’acceptation que vos scripts doivent vérifier fichier par fichier.
| Nom de fichier | Pixels (L×H) |
|---|---|
icon_16x16.png | 16 × 16 |
icon_16x16@2x.png | 32 × 32 |
icon_32x32.png | 32 × 32 |
icon_32x32@2x.png | 64 × 64 |
icon_128x128.png | 128 × 128 |
icon_128x128@2x.png | 256 × 256 |
icon_256x256.png | 256 × 256 |
icon_256x256@2x.png | 512 × 512 |
icon_512x512.png | 512 × 512 |
icon_512x512@2x.png | 1024 × 1024 |
Checklist d’acceptation sRGB et ICC
| Contrôle | Méthode | Critère de réussite |
|---|---|---|
| Espace couleur | Inspecteur Aperçu ou sips -g profile |
sRGB embarqué ou conversion documentée depuis des masters P3 |
| Profondeur | Audit des préréglages d’export | PNG 8 bits par taille livrée |
| Politique alpha | Échantillonnage sur fond Dock | Pas de frange accidentelle ; opacité pleine hors trous voulus |
| Géométrie | sips -g pixelWidth -g pixelHeight |
Pixels exacts pour chaque ligne du tableau des tailles |
Croisez ce tableau avec le raisonnement détaillé de notre article sur la gestion couleur PNG sur Mac afin que les lots d’icônes héritent de la même narration ICC que les visuels marketing.
Étapes batch : sips, iconutil et validation
Exécutez la boucle sur un Mac M4 distant lorsque les portables doivent rester disponibles pour la conception ; les commandes sont courtes, mais la validation cumulée sur plusieurs SKU prend du temps et mérite un hôte dédié.
- Normaliser le master en PNG
1024×1024sRGB, avec marge intérieure pour le glyphe critique. - Redimensionner avec
sipsvers un dossier nomméMonIcone.iconset:
MASTER="AppIcon-1024.png"
OUT="MonIcone.iconset"
mkdir -p "$OUT"
sips -z 1024 1024 "$MASTER" --out "$OUT/icon_512x512@2x.png"
sips -z 512 512 "$MASTER" --out "$OUT/icon_512x512.png"
sips -z 512 512 "$MASTER" --out "$OUT/icon_256x256@2x.png"
sips -z 256 256 "$MASTER" --out "$OUT/icon_256x256.png"
sips -z 256 256 "$MASTER" --out "$OUT/icon_128x128@2x.png"
sips -z 128 128 "$MASTER" --out "$OUT/icon_128x128.png"
sips -z 64 64 "$MASTER" --out "$OUT/icon_32x32@2x.png"
sips -z 32 32 "$MASTER" --out "$OUT/icon_32x32.png"
sips -z 32 32 "$MASTER" --out "$OUT/icon_16x16@2x.png"
sips -z 16 16 "$MASTER" --out "$OUT/icon_16x16.png"- Compiler avec
iconutil -c icns "$OUT" -o MonIcone.icns. - Vérifier les dimensions par boucle sur
*.pngcomme dans la matrice icônes iOS (même motifsips -g). - Archiver le
.iconsetet l’ICNSavec une ligne de manifeste (octets, largeur, hauteur) par fichier pour le ticket de release. - Étendre la chaîne : pour de très grands canevas ou exports 4K autour du pack icône, réutilisez les habitudes de file décrites dans le guide export PNG 4K par lot sur Mac M4 distant.
Chiffres à coller dans les tickets
- 10 fichiers PNG constituent la grille standard du
.iconsetmacOS listée ci-dessus. - 1024 × 1024 pixels correspondent au plus grand créneau compilé (
icon_512x512@2x.png). - Une politique de profil sRGB partagée entre icône, PNG d’interface et marketing réduit les audits de dérive de marque.
FAQ : coins, transparence et passation
Dois-je graver les coins arrondis macOS dans le PNG ? Non pour les icônes AppKit de production : livrez un carré plein cadre ; le système applique le masque. Les bitmaps pré-arrondis génèrent souvent des halos et des écarts dans le Dock. Si le marketing exige un visuel pré-masqué, sortez cet actif explicitement du .iconset de production.
Pourquoi les bords transparents grisent après redimensionnement par lot ? Une alpha prémultipliée mal traitée et des espaces de travail hors sRGB produisent des franges à la composition. Gardez les masters en sRGB, validez sur fonds clair et sombre, et resserrez le rembourrage semi-transparent involontaire.
ICNS ou dossier PNG : quelle source fait foi ? Favorisez le .iconset pour la revue ; regénérez l’ICNS dès que les PNG changent. Documentez la règle pour que la CI et le design restent alignés lorsque deux pipelines consomment le même visuel.
Synthèse
Traitez le tableau des tailles et la checklist sRGB comme des portiques d’acceptation non négociables ; compilez avec iconutil seulement après validation des sorties sips, et conservez des masters carrés sans rayon de coin figé. En déportant la boucle vers un Mac distant loué (classe M4), vous libérez les postes design pour la création pendant que les jobs nocturnes, les manifestes et les reruns sécurisent la livraison.
Étapes suivantes
Ouvrez l’accueil MacPng, comparez les tarifs et nœuds pour une machine Apple Silicon, parcourez la aide SSH/VNC pour brancher votre worker, et consultez la page achat / location lorsque vous êtes prêt à réserver. Le blog design & workflow prolonge cette matrice avec d’autres playbooks PNG et automatisation.
Lots d’ICNS et de .iconset sur Mac distant
Figez la version de macOS, enchaînez des jobs sips et iconutil reproductibles, et joignez un manifeste de dimensions à chaque release — idéal lorsque les drops icône bureau et mobile coïncident.