Préparer une image source qui fonctionne à toutes les tailles
Une bonne icône d'application doit rester reconnaissable, d'un minuscule favicon de navigateur 16 × 16 à une grande image de fiche de boutique 512 × 512. Commencez par une image source carrée, de préférence de 1024 × 1024 pixels ou plus, avec un signe simple et à fort contraste au centre.
Évitez les petits textes, les contours fins et les détails visuels qui ne fonctionnent qu'à de grandes tailles. Ils disparaissent souvent lorsque le navigateur ou le système d'exploitation rend votre icône à de petites dimensions. Si votre logo est rectangulaire, placez-le d'abord sur un canevas carré au lieu de l'étirer.
- Utilisez PNG lorsque votre motif d'origine inclut de la transparence ou des bords de logo nets.
- Maintenez le signe principal centré et laissez suffisamment d'espace visible autour.
- Utilisez une couleur d'arrière-plan unie si vous avez également besoin d'une sortie pour iOS.
- Prévisualisez la plus petite taille de favicon avant de télécharger le paquet final.
Favicons Web, icônes Apple Touch et icônes de manifeste PWA
L'exportation Web/PWA couvre les ressources de navigateur et d'application web installable couramment nécessaires dans un dossier public. Elle inclut des tailles de favicon PNG pour les navigateurs modernes, un favicon.ico optionnel pour une compatibilité plus large avec les systèmes anciens, et une icône Apple touch pour les favoris de l'écran d'accueil iOS.
Pour les PWA installables, le paquet inclut également des icônes de manifeste en 192 × 192 et 512 × 512. Lorsque vous activez l'option masquable, une icône est ajoutée, conçue pour conserver les éléments importants lorsqu'un appareil applique sa propre forme d'icône.
La configuration du manifeste est incluse, pas l'implémentation complète de la PWA
Le site.webmanifest et l'extrait de balises head générés accélèrent la configuration des icônes. Votre application a toujours besoin du reste de la configuration PWA, comme un service worker approprié et les exigences d'installabilité.
Ressources de lanceur et icônes adaptatives pour Android
Les appareils Android utilisent des ressources de lanceur spécifiques à la densité pour que le système d'exploitation puisse choisir une image adaptée à chaque densité d'écran. L'exportation Android organise ces fichiers dans les répertoires habituels res/mipmap-* et peut inclure des variantes de lanceur rondes et une icône de fiche Google Play de 512 × 512.
Les icônes adaptatives sont des ressources de lanceur Android natives qui combinent des calques de premier plan et d'arrière-plan via des définitions XML. En mode image unique, ce générateur crée des ressources dérivées compatibles à partir de votre image source et de la couleur d'arrière-plan sélectionnée.
Important : les icônes adaptatives ne séparent pas automatiquement le motif
Une seule image plate ne peut pas être divisée de manière fiable en un premier plan de logo réellement modifiable et un calque d'arrière-plan indépendant. Pour de meilleurs résultats, gardez le logo centré et avec une marge généreuse. Pour des icônes adaptatives parfaitement fidèles à la marque, utilisez des motifs de premier plan et d'arrière-plan conçus séparément dans votre projet Android.
AppIcon.appiconset pour iOS et Xcode
L'exportation iOS crée un dossier AppIcon.appiconset conçu pour un catalogue de ressources Xcode. Il inclut les variantes d'image requises pour iPhone, iPad et App Store, ainsi qu'un fichier Contents.json qui mappe chaque image générée au type d'appareil, à la taille en points et au facteur d'échelle attendus.
Les icônes d'application iOS sont aplaties sur la couleur d'arrière-plan sélectionnée. Cela évite de générer des icônes transparentes et maintient l'ensemble de ressources aligné sur les exigences courantes des icônes pour l'App Store.
- N'arrondissez pas le motif au préalable ; iOS applique son propre masque d'icône.
- Utilisez une couleur d'arrière-plan qui correspond à l'identité de votre produit.
- Faites glisser AppIcon.appiconset dans Assets.xcassets, puis sélectionnez-le comme ensemble d'icônes d'application pour la cible.
- Examinez l'icône générée dans Xcode avant de soumettre une compilation.
Icônes PWA masquables et icônes adaptatives Android
Ces deux termes sont facilement confondus car ils traitent tous deux de formes d'icônes contrôlées par le système. Ils ne sont cependant pas interchangeables.
Une icône masquable est un fichier image de manifeste d'application web qui fournit un espace de sécurité supplémentaire pour les masques de lanceur des PWA installées. Une icône adaptative Android est une ressource Android native composée de calques de premier plan et d'arrière-plan, ainsi que de références XML. Activez les deux si vous publiez une PWA et une application Android native, mais utilisez chaque type de fichier dans la configuration de sa propre plateforme.
Votre image source reste dans le navigateur
Cette scène est conçue pour le traitement d'images dans le navigateur. L'image source est transformée localement dans le navigateur au lieu d'être téléversée sur un serveur distant de traitement d'images, ce qui est utile lorsque vous préparez des motifs de produits non encore publiés, des logos de clients ou des ressources internes d'application.
La page elle-même charge toujours le code de l'application et les ressources de traitement depuis le site web. Le traitement local signifie que les données de l'image n'ont pas besoin d'être envoyées à un serveur pour effectuer la conversion.
