Un guide pratique des icônes d'applications Android : les icônes adaptatives expliquées (et comment générer les vôtres correctement)
C'est une surprise courante pour les développeurs Android débutants : vous peaufinez un seul PNG carré pour l'icône de votre application, vous l'exportez au format 512 x 512 et il semble parfait dans votre éditeur d'images. Ensuite, vous installez une version de débogage sur un téléphone Samsung et l'icône apparaît soudainement tronquée et légèrement décentrée, comme si une partie du logo avait été coupée. Il n'y a rien de mal avec le fichier lui-même. Le problème est qu’une seule image carrée ne survivrait jamais au contact avec le monde réel des lanceurs Android, dont chacun recadre, masque et remodèle les icônes différemment. Si vous n'avez pas encore rencontré ce problème, ce n'est qu'une question de temps avant que vous ne le fassiez, alors passons en revue ce qui se passe sous le capot et comment y parvenir du premier coup.
Pourquoi un seul PNG carré ne suffit plus
Dans les premières années d'Android, les icônes d'application étaient exactement ce à quoi elles ressemblaient : un seul PNG carré (ou parfois de forme libre) que chaque lanceur affichait tel quel. Cela a bien fonctionné jusqu'à ce que les fabricants commencent à différencier visuellement leurs téléphones, et l'un des endroits les plus simples pour le faire était l'écran d'accueil. Samsung voulait des carrés arrondis, certains skins OEM chinois voulaient des traitements de coins différents, et Android d'origine a finalement opté pour des cercles. Soudainement, le même fichier d'icône semblait sensiblement différent, et parfois visiblement pire, selon le téléphone sur lequel il avait atterri.
La réponse de Google, introduite avec Android 8.0 Oreo, était le système d'icônes adaptatives. Au lieu de fournir une forme fixe, les développeurs fournissent des illustrations en couches que le système d'exploitation lui-même masque dans la forme préférée d'un lanceur donné. L'identité visuelle reste cohérente ; seule la silhouette extérieure change.
Qu’est-ce qu’une icône adaptative exactement?
Une icône adaptative est construite à partir de deux calques distincts, chacun occupant un canevas de 108 dp sur 108 dp : un calque d'arrière-plan et un calque de premier plan. Android compose les deux ensemble, puis applique la forme de masque utilisée par le lanceur actuel, qu'il s'agisse d'un cercle, d'un carré arrondi, d'une larme ou de tout autre chose. La structure à deux couches permet à Android d'ajouter également des effets de parallaxe et de mouvement subtils, car les couches peuvent se déplacer indépendamment lorsque vous appuyez ou faites glisser une icône.
Dans les ressources d'une application, cela est généralement défini via un fichier XML tel que mipmap-anydpi-v26/ic_launcher.xml, qui pointe simplement vers les dessinables d'arrière-plan et de premier plan plutôt que de contenir les données de pixels elles-mêmes. Un ic_launcher.png plat traditionnel est toujours conservé comme solution de secours pour les appareils fonctionnant sous Android 7.1 ou une version antérieure, qui sont entièrement antérieures au système d'icônes adaptatives.
Pourquoi la zone de sécurité est importante
Voici la partie qui fait le plus trébucher les gens. Même si le canevas de chaque calque mesure 108 dp sur 108 dp, seul le cercle intérieur de 66 dp sur 66 dp, centré dans ce canevas, est garanti d'être visible quelle que soit la forme de masque appliquée. Cette région intérieure est communément appelée zone de sécurité. Tout ce qui se trouve à l'extérieur peut être affiché sur un masque circulaire, puis brusquement clipsé sur un masque en forme de cercle ou de larme plus agressif, ou vice versa.
C'est exactement le genre de problème qui apparaît lorsqu'un logo est dessiné près des bords de la toile pour maximiser sa taille visuelle : il peut paraître parfait sur un masque circulaire mais être coupé de manière inégale sur le masque circulaire de Samsung. Le correctif n'est pas une refonte, il s'agit simplement de réduire légèrement l'illustration afin que le contenu significatif reste à l'intérieur de la zone de sécurité, quelle que soit la forme finalement appliquée.
Formes de lanceur que vous rencontrerez
| Forme | Où tu le verras |
|---|---|
| Cercle | Stock Android, lanceur Pixel (la valeur par défaut de longue date) |
| Cercle (carré arrondi) | Samsung One UI et plusieurs autres skins Android |
| Carré arrondi (superellipse) | iOS, appliqué automatiquement par le système sans contrôle du développeur |
| Larme | Proposé en option sélectionnable sur certaines versions du logiciel Samsung |
| Carré avec coins doux | Divers skins de lanceurs d'autres fabricants |
Le point pratique à retenir est que vous ne pouvez pas choisir laquelle de ces formes votre icône finira par porter. Les utilisateurs des lanceurs Android d'origine peuvent souvent même choisir leur forme préférée dans un menu de paramètres. Votre seul véritable levier est de vous assurer que l’œuvre d’art elle-même survit à toutes ces œuvres avec élégance, ce que la zone de sécurité est là pour garantir.
Construire les actifs : tailles et densités dont vous avez besoin
| Godet de densité | Taille de l'icône du lanceur |
|---|---|
| mdpi | 48 x 48 pixels |
| hdpi | 72 x 72 pixels |
| xhdpi | 96 x 96 pixels |
| xxhdpi | 144 x 144 pixels |
| xxxhdpi | 192 x 192 pixels |
| Icône de liste Play Store | 512 x 512 pixels |
Si vous expédiez également l'application sur iOS, ajoutez-en un autre ensemble, car les exigences en matière d'icônes de l'App Store d'Apple plafonnent à 1024 x 1024 et utilisent un format complètement différent, sans couches, sans aucune transparence.
La méthode manuelle ou l'utilisation d'un générateur
Vous pouvez absolument produire chacune de ces tailles à la main dans un éditeur d'images ou via Image Asset Studio intégré à Android Studio, qui gère assez bien la mise à l'échelle de la densité et les aperçus de masques pour un seul projet. Là où cela devient fastidieux, c'est lorsque vous gérez un système de conception sur plusieurs applications, que vous avez besoin de faire correspondre les exportations iOS à partir de la même illustration principale ou que vous souhaitez simplement un moyen rapide de vérifier le comportement d'une conception sur chaque forme avant de vous y engager.
Générez toutes les tailles à partir d'une image principale
Notre Générateur d'icônes d'application prend une seule image source haute résolution et produit l'ensemble complet des compartiments de densité Android, la structure adaptative de premier plan/arrière-plan des icônes et la taille de la liste Play Store, le tout à partir d'un seul téléchargement, vous n'avez donc pas à exporter et à renommer manuellement une douzaine de fichiers à la main.
Extraire des icônes d'un APK existant
Parfois, le besoin va dans la direction opposée. Peut-être avez-vous hérité d'un projet sans ses fichiers de conception d'origine, ou souhaitez-vous voir exactement comment un concurrent a structuré son icône avant de concevoir la vôtre, ou vous devez simplement retirer une icône d'un APK construit pour la réutiliser dans un outil ou un actif marketing associé. Puisqu'un APK est en fait une archive structurée contenant toutes les ressources d'une application, ses fichiers d'icônes de lancement sont physiquement présents à l'intérieur et peuvent être extraits directement, plutôt que reconstruits à partir de zéro.
Notre Extracteur d'icônes extrait exactement ces fichiers de tout APK que vous téléchargez, vous donnant les icônes brutes quelle que soit la résolution fournie par le développeur d'origine, ce qui est souvent le moyen le plus rapide de récupérer un fichier source perdu ou d'étudier comment une autre application a abordé le même problème de conception.
Erreurs d'icône courantes signalées lors de l'examen
- Cuisson avec un rembourrage supplémentaire ou du chrome UI. Un effet d'ombre portée, de bordure ou de coin arrondi ajouté manuellement à l'intérieur de l'image entre en conflit avec le masquage du système et semble souvent doublé ou mal aligné.
- Utiliser un fond blanc pur sans bord distinct. Sur les lanceurs à thème clair, l'icône peut devenir presque invisible sur l'arrière-plan de l'écran d'accueil.
- Détails trop fins. Le texte et les lignes complexes qui semblent nettes à 512 pixels se transforment souvent en une tache illisible une fois réduits à 48 pixels, ce qui correspond à la façon dont la plupart des utilisateurs le voient au quotidien.
- Une incompatibilité entre l'icône de la liste Play Store et l'icône d'installation. Les évaluateurs et les utilisateurs remarquent tous deux lorsque ces deux éléments ne correspondent pas, et cela semble bâclé ou, pire encore, suspect.
- Oublier complètement le repli hérité. Si votre application prend toujours en charge les versions Android antérieures à 8.0, ignorer la solution de secours PNG plate peut laisser à ces utilisateurs une icône cassée ou d'apparence générique.
Tester votre icône sur toutes les formes avant de l'expédier
Avant de finaliser une icône, il vaut la peine de la prévisualiser sous au moins un masque circulaire et un masque circulaire côte à côte, plutôt que de supposer qu'elle se traduira proprement. Image Asset Studio d'Android Studio inclut un aperçu en direct de plusieurs formes de lanceur pour exactement cette raison, et il ne faut qu'une minute pour détecter un problème qui autrement n'apparaîtrait qu'après la publication, lorsqu'un utilisateur sur la "mauvaise" forme de lanceur signale que quelque chose semble bizarre.
Points clés à retenir
- Les icônes adaptatives utilisent deux calques, arrière-plan et premier plan, sur un canevas de 108 dp, que le système masque sous différentes formes par lanceur.
- Seule la zone de sécurité intérieure de 66 dp est garantie visible sur toutes les formes de masque ; gardez des œuvres d’art significatives à l’intérieur.
- Vous avez toujours besoin d’une icône plate héritée pour les appareils fonctionnant sous Android 7.1 ou version antérieure.
- Un générateur peut produire toutes les densités requises et toutes les tailles de liste Play Store à partir d'une seule image principale, économisant ainsi un travail d'exportation manuel important.
- Les icônes peuvent être extraites directement d'un APK existant lorsque les fichiers sources sont perdus ou que vous devez étudier les actifs d'une autre application.
Questions Fréquentes (FAQ)
Quelle est la taille réelle en pixels requise pour une icône de fiche Play Store?
512x512 pixels, un PNG 32 bits avec un canal alpha. Ceci est distinct des tailles d’icônes du lanceur regroupées dans l’APK lui-même.
Le calque d'arrière-plan de mon icône adaptative doit-il être de couleur unie?
Il ne s'agit pas nécessairement d'une couleur plate, mais elle doit généralement être opaque et simple, car elle peut être décalée, mise à l'échelle ou masquée d'une manière que vous ne contrôlez pas entièrement. Les arrière-plans chargés ou transparents ont tendance à paraître incohérents d’un lanceur à l’autre.
Puis-je réutiliser la conception de mes icônes adaptatives Android directement pour iOS?
Pas directement. iOS utilise une seule image carrée plate avec des coins arrondis appliqués par le système plutôt que des calques séparés. Vous exportez donc généralement une version aplatie simplifiée de la même illustration pour iOS.
Pourquoi mon icône apparaît-elle bien sur mon téléphone mais est-elle floue sur la liste Play Store?
Cela se produit généralement lorsque l'icône de la liste a été agrandie à partir d'une petite image source. Commencez toujours à partir d'un fichier maître d'au moins 1 024 x 1 024 pixels et exportez chaque taille requise à partir de cela.
Que se passe-t-il si j'ignore l'ancienne icône de remplacement pour les anciennes versions d'Android?
Les appareils fonctionnant sous Android 7.1 ou version antérieure, qui ne prennent pas en charge les icônes adaptatives, peuvent revenir à une icône système générique ou afficher votre icône de manière incorrecte. Vous pouvez ignorer cette étape en toute sécurité uniquement si la version Android minimale prise en charge par votre application est 8.0 ou supérieure.
Vous n'avez pas besoin d'une formation en théorie du design pour tout cela, il suffit d'être conscient que votre icône sera remodelée d'une manière que vous ne contrôlez pas au moment où elle quitte vos mains. Concevez pour la zone de sécurité, conservez une solution de secours héritée, générez toutes les tailles requises à partir d'un fichier maître propre, et votre icône tiendra le coup, quel que soit le lanceur sur lequel elle atterrit.