Une icône d'application est un seul dessin qui doit porter 36 tailles différentes, sur 5 plateformes, dans des contextes qui vont de l'onglet de navigateur de 16 pixels à l'envoi de boutique de 1024. Le Générateur d'Icônes d'Application prend une photo, la rogne en carré par cadrage plein et exporte toute la famille en un ZIP : 36 PNG dans des dossiers par plateforme, plus un manifest PWA et un manifest de jeu d'icônes iOS. Rien n'est envoyé : le rognage, le rééchantillonnage et l'assemblage du ZIP tournent sur le canevas du navigateur.
Les 36 tailles sur 5 plateformes
La liste fait 12 iOS, 9 Android, 5 web, 6 macOS et 4 Windows. iOS va de l'icône de réglages de 29 pixels à l'envoi App Store de 1024, avec 40, 58, 60, 76, 80, 87, 120, 152, 167 et 180 entre les deux. Android couvre l'icône Play Store de 512, les 2 tailles d'icône adaptatif (48 et 192) et les 5 densités de lanceur, de 36 en ldpi à 192 en xxxhdpi. Web tient la paire PWA de 192 et 512, l'apple-touch-icon Safari de 180, et les 2 favicons de 32 et 16. macOS monte 16, 32, 128, 256, 512, 1024 ; Windows apporte des tuiles de 44, 71 et 150 plus une image de boutique de 500 pixels. Le commutateur de plateformes saute des groupes entiers : un build web seul télécharge 5 PNG et un manifest au lieu des 36 complets. Si vous ne voulez qu'une dimension cible, le redimensionneur d'images fait le rééchantillonnage unique avec la même règle de cadrage plein.
D'une photo de 4000×3000 à une icône de 512
Chaque cible est carrée, donc une photo rectangulaire doit d'abord devenir carrée avant d'être mise à l'échelle. La règle est le cadrage plein : scale = max(w / iw, h / ih), où w et h sont la cible et iw, ih la source. Pour une photo de 4000×3000 dans une cible de 512, scale = max(512/4000, 512/3000) = max(0,128, 0,17067) = 0,17067, le carré de la source mesure 512/0,17067 = 3000 de côté, centré : sx = (4000 − 3000)/2 = 500, sy = 0. La photo 4:3 donne son centre de 3000×3000 ; 500 pixels de chaque bord sont coupés. Une photo verticale perd en haut et en bas. Le max est délibéré : le min rangerait la photo entière dans le carré et laisserait les coins vides, exactement ce qu'une icône ne doit pas avoir. Le convertisseur d'images change la codification sans toucher à la géométrie, et le recadrage d'images applique le même calcul du carré central quand vous voulez la coupe seule.
Un rééchantillonnage par taille, pas une chaîne
Chacune des 36 sorties est peinte en une unique opération de canevas directement depuis la photo d'origine, lissage activé, qualité en haute. Il n'y a pas de chaîne de 1024 à 512 à 256 : le favicon de 16 pixels sort d'un seul pas de 0,015625 depuis une source de 1024, et l'icône macOS de 128 d'un seul pas de 0,25 depuis 512. Cela a une conséquence visible. Comme toutes les tailles partagent le même rognage et le même rééchantillonnage, le détail qui se lit bien à 1024 est celui qui devient bruit à 16, et la rangée d'aperçu de 32, 48, 64, 128 et 180 est l'endroit où un design faible se montre avant que le ZIP soit monté.
Ce qui arrive dans le ZIP
L'archive contient jusqu'à 36 PNG dans des dossiers ios/, android/, web/, macos/ et windows/, plus 3 documents. Si web est sélectionné, il y a un manifest.json : le nom de l'application, un short_name coupé aux 12 premiers caractères (My Very Long App se présente comme My Very Long), les 2 icônes PWA avec le rôle any maskable, thème et fond fixés à #ffffff, et display standalone. Si iOS est sélectionné, il y a un ios/Contents.json avec les 14 entrées qu'Xcode attend, qui mappent les tailles de 20, 29, 40, 60, 76, 83,5 et 1024 points vers les fichiers PNG. Un README.md liste le tableau des tailles et des fichiers par plateforme. Le nom du téléchargement sort du nom de l'application : tout caractère qui n'est ni lettre ni chiffre devient un tiret, tout passe en minuscules, donc My Cool App produit my-cool-app-icons.zip. Une ponctuation finale devient un second tiret (my-cool-app--icons.zip), l'une des raisons pour lesquelles le champ de nom est plafonné à 30 caractères. Le PNG est une codification sans perte et le poids d'une icône de 1024 est décidé par le dessin ; quand la boutique ou le budget web compte les octets, le compresseur d'images est l'endroit où la re-codification allège les mêmes pixels.
Où vont les icônes : manifest, splash, boutique
Les 2 icônes du manifest sont celles que le navigateur installe : 192 pour l'écran d'installation, 512 pour le splash et la carte de partage. Le rôle any maskable dit au système d'exploitation qu'il peut recadrer l'image en cercle ou en squircle, et c'est pourquoi la zone sûre est le centre, autour de 80 % du canevas : gardez le sujet dedans et le cadre à la charge de la plateforme. Les 32 et 16 de web/ sont les frères du favicon, l'icône d'onglet que le navigateur va chercher avant de lire le manifest. Le générateur de favicons couvre le reste de cette famille, y compris l'ICO multi-tailles, le mstile de Windows et les balises HTML de lien prêtes à coller. Les entrées App Store et Play Store sont celles qu'un examinateur voit en premier, donc 1024 et 512 sont les tailles qui méritent un second regard.
La même mathématique de redimensionnement partout
Le cadrage plein plus un seul rééchantillonnage de haute qualité est un petit morceau de mathématique qui apparaît partout sur le site. Le redimensionneur d'images l'applique à une cible unique, le compresseur re-codifie les pixels qui en sortent, et le convertisseur de taille de fichier est l'endroit où vous pèsez le résultat : un ZIP de 36 PNG est l'endroit où une source de 1024 vous coûte en octets, et les fichiers de 16 pixels coûtent presque rien. Si le problème est la coupe en elle-même, le sujet dans le coin et la coupe du carré central le rate, le guide de rognage d'image passe par la mathématique de la coupe avant celle du rééchantillonnage. L'icône est le dernier artefact que cette mathématique produit : un carré, 36 tailles, et le même centre dans chacune.