Les équipes web livrent encore des échelles PNG à côté du SVG pour l’onglet, la pose sur l’écran d’accueil et le manifeste PWA. Ce guide propose une matrice 2026 côté Mac : tailles attendues, icône maskable et marge intérieure, sRGB contractuel, affûtage ciblé pour les tout petits formats, puis une checklist d’acceptation exécutable sur un Mac mini M4 distant avec journaux reproductibles.
Dans cet article
Friction typique : trois produits dans un seul brief
- Géométries incompatibles. L’onglet exige un glyphe lisible à
32px ; iOS attend180×180pourrel="apple-touch-icon"; le manifeste impose192et512avec des usages « any » et parfois « maskable » distincts. - Maskable n’est pas un simple agrandissement. Les lanceurs adaptatifs rognent agressivement ; un logo qui touche les bords disparaît sous les masques circulaires ou en forme de goutte.
- Sans contrat couleur, tout dérive. Une maquette en P3 ou non étiquetée se lit faux dans un shell sRGB ; verrouillez le profil avant toute série
sips, en cohérence avec notre checklist sRGB contre P3. - Le volume réclame des garde-fous. Comparer chaque fichier au plafond d’octets, tracer les hachages et la version des outils appartient à un worker stable, pas à un portable entre deux réunions.
Pour le cadre formats livrables côté page, croisez avec WebP, AVIF ou PNG en batch ; pour d’autres gabarits « safe zone », voyez la matrice bannières social ; pour des échelles proches des stores natifs, la matrice icônes app iOS et la checklist ICNS complètent le paysage.
Tableau des emplacements : favicon, touch icon, manifeste, maskable
| Emplacement de livraison | PNG typique | Risque principal | Règle de brief |
|---|---|---|---|
| Favicon classique (onglet) | 32×32 ; 16×16 si pack .ico legacy |
Traits flous après downscale | Affûtage léger sur marques vectorielles ; éviter le bruit photo |
rel="apple-touch-icon" |
180×180 |
Coins rognés par le cadre iOS | Marge utile ≥ 10 % ; viser 14 % si traits fins |
Manifeste icons[] « any » |
192×192 et 512×512 |
Entrées purpose incomplètes |
Deux tailles carrées paires ; "purpose": "any" explicite |
| Manifeste « maskable » | 512×512 avec marge intérieure |
Masques circulaires ou squircle | Contenu critique dans un cercle central de diamètre 80 % du carré ; couronne = fond perdu |
Cinq étapes sips et ImageMagick reproductibles
Fixez la version d’ImageMagick sur le worker et consignez sips --version dans le même journal JSONL que les exports.
Étape 1 — Normaliser le master carré en sRGB
sips --matchTo "/System/Library/ColorSync/Profiles/sRGB Profile.icc" master.png --out master_srgb.png
Étape 2 — Dériver les tailles avec sips
sips -z 32 32 master_srgb.png --out favicon-32.png
sips -z 180 180 master_srgb.png --out apple-touch-icon-180.png
sips -z 192 192 master_srgb.png --out pwa-192.png
sips -z 512 512 master_srgb.png --out pwa-512-any.png
Produisez 16×16 seulement si la chaîne livre encore un bundle .ico ; sinon 32 plus un favicon SVG couvre la plupart des navigateurs modernes.
Étape 3 — Affûtage micro optionnel pour le favicon
magick favicon-32.png -colorspace sRGB -filter Lanczos -resize 32x32! -unsharp 0x0.45+0.45+0.006 favicon-32-sharp.png
Rayon minimal pour limiter les halos ; n’appliquez pas ce passage sur l’art 512 maskable déjà doux.
Étape 4 — Composer le 512 maskable avec marge
Réduisez le bloc logo pour qu’il tienne dans le disque de 80 % de côté ; vérifiez dans Chrome DevTools → Application → prévisualisation maskable avant fusion.
Étape 5 — Câbler HTML et manifeste avec traçabilité
shasum -a 256 pwa-512-any.png >> icons-manifest.sha256
Pointez link rel="icon", apple-touch-icon et le manifest.webmanifest vers des noms versionnés ; incrémentez la clé de cache lors d’un renommage.
Checklist d’acceptation sur Mac M4 distant
- Géométrie verrouillée : chaque
W×Hcorrespond à la fiche sans tolérance fantôme ; refusez les tailles impaires si le manifeste promet des carrés pairs. - Conformité sRGB : sur un échantillon par famille de taille,
magick identify -verboseafficheColorspace: sRGBet la politique ICC convenue (profil embarqué ou pixels alignés sRVB). - Plafonds octets de départ :
32 ≤ 12 Ko,180 ≤ 45 Ko,192 ≤ 55 Ko,512 any ≤ 180 Ko,512 maskable ≤ 220 Ko— ajustez selon votre CDN et votre politique de compression lossless. - Audit d’affûtage : toute triple
-unsharpdoit être journalisée ligne à ligne pour revue différentielle. - Fumée « Ajouter à l’écran d’accueil » : Chrome Android et Safari iOS depuis un staging ; archivez captures et builds.
Seuils et lignes de politique faciles à citer
- Zone sûre maskable : cercle centré de diamètre
0,8 × min(largeur, hauteur); tout ce qui dépasse est considéré comme jetable sous masque. - Marge touch icon : plancher
10 %de marge intérieure ; montez vers14 %pour les cheveux de trait au bord du carré180. - Snippet de garde octets :
test "$(stat -f%z pwa-192.png)" -le 55000pour un plafond indicatif55 Kosur192— adaptez le nombre au SKU.
FAQ
Un seul 512 pour any et maskable ? Acceptable uniquement si les marges maskable sont déjà respectées ; sinon deux lignes dans le manifeste évitent les surprises sur les Pixel.
L’icône touch paraît plus sombre ? Rejouez le match sRGB et comparez le gamma d’export avec Safari sur un écran étalonné.
Louer un Mac M4 distant pour les sweeps d’icônes nocturnes
Après une refonte visuelle, un Mac mini M4 distant relance les mêmes sips, contrôles magick et garde-fous stat pour plusieurs tenants avec une seule chaîne d’outils. Passez par l’accueil MacPng, consultez les forfaits et nœuds, ouvrez l’aide SSH et VNC pour la mise en route, et parcourez le blog public pour d’autres matrices livraison.
Déléguer l’échelle d’icônes et la QA à un worker stable
Redimensionnements déterministes, normalisation ICC et plafonds octets restent alignés pendant que la création reste locale ; ne promouvez que des artefacts hachés.