2026 Matrice de décision pour livrer sur Mac favicon et icônes PWA en PNG multi-tailles : zone sûre maskable, sRGB et checklist d’acceptation batch sur Mac M4 distant

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

  1. Géométries incompatibles. L’onglet exige un glyphe lisible à 32 px ; iOS attend 180×180 pour rel="apple-touch-icon" ; le manifeste impose 192 et 512 avec des usages « any » et parfois « maskable » distincts.
  2. 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.
  3. 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.
  4. 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

  1. Géométrie verrouillée : chaque W×H correspond à la fiche sans tolérance fantôme ; refusez les tailles impaires si le manifeste promet des carrés pairs.
  2. Conformité sRGB : sur un échantillon par famille de taille, magick identify -verbose affiche Colorspace: sRGB et la politique ICC convenue (profil embarqué ou pixels alignés sRVB).
  3. 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.
  4. Audit d’affûtage : toute triple -unsharp doit être journalisée ligne à ligne pour revue différentielle.
  5. 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 vers 14 % pour les cheveux de trait au bord du carré 180.
  • Snippet de garde octets : test "$(stat -f%z pwa-192.png)" -le 55000 pour un plafond indicatif 55 Ko sur 192 — adaptez le nombre au SKU.
Même avec un favicon SVG, conservez l’échelle PNG pour les invites d’installation PWA et les intranets qui bloquent le SVG.

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.

Mac M4 distant · favicon et PWA PNG

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.

Accueil Louer un M4 distant Forfaits Aide Blog public
Mac M4 distant · favicon & PWA PNG Exports batch & QA
Louer maintenant