Générateur d’icônes d’application : toutes les tailles iOS et Android

Une icône d’application se décline en une vingtaine de tailles entre iOS, Android et les fiches des stores. Cet outil prend votre visuel carré, idéalement en 1024×1024, génère chaque taille au pixel près et vous livre un ZIP organisé : le dossier AppIcon.appiconset avec son Contents.json prêt pour Xcode, les dossiers mipmap attendus par Android Studio et l’icône Play Store en 512.

Mode d’emploi : du visuel source au pack complet

L’outil ci-dessus demande une seule image et produit toutes les déclinaisons d’un coup. Voici la marche à suivre, champ par champ.

1. Téléversez votre visuel dans la zone « Votre icône (PNG ou JPEG, idéalement 1024×1024) ». L’image doit être carrée : si la vôtre ne l’est pas, recadrez-la avant, car forcer un carré à partir d’un rectangle déformerait le dessin. Partez toujours de la plus haute définition disponible, jamais d’une petite icône agrandie.
2. Choisissez les plateformes avec les cases « iOS », « Android » et « Icône Play Store (512) ». Cochez les trois si vous publiez sur les deux stores : le poids du ZIP reste négligeable et vous aurez tout sous la main au moment de l’intégration.
3. Réglez la transparence. La case « Aplatir la transparence sur fond blanc » remplace les zones transparentes de votre PNG par un fond blanc opaque. Cochez-la systématiquement si votre visuel comporte de la transparence : l’App Store refuse les icônes 1024×1024 qui contiennent une couche alpha.
4. Cliquez sur « Générer le pack d’icônes ». L’aperçu affiche chaque taille produite, de 40 à 1024 pixels, avec sa dimension exacte sous la vignette. Profitez-en pour juger la lisibilité des plus petites : c’est à 40 ou 48 pixels qu’une icône trop détaillée se dégrade en tache illisible.
5. Cliquez sur « Télécharger le ZIP ». L’archive contient trois dossiers : ios/AppIcon.appiconset/ avec le Contents.json, android/ avec ses cinq dossiers mipmap, et play-store/ avec l’icône 512×512.

Pourquoi autant de tailles pour une seule icône ?

Sur iOS, les interfaces se mesurent en points, pas en pixels. Un iPhone standard affiche 2 pixels par point (écran dit @2x), les modèles Pro et la plupart des iPhone récents en affichent 3 (@3x). Une icône d’écran d’accueil de 60 points existe donc en deux fichiers physiques : 120 pixels pour les écrans @2x et 180 pixels pour les écrans @3x. Ajoutez les tailles dédiées à Spotlight, aux réglages, aux notifications, à l’iPad et à la vitrine App Store, et vous obtenez la liste complète que l’outil génère.

Côté Android, la logique est identique mais s’exprime en densités d’écran. L’outil produit les cinq tailles du système historique de lanceur : 48 pixels pour mdpi, 72 pour hdpi, 96 pour xhdpi, 144 pour xxhdpi et 192 pour xxxhdpi, chacune rangée dans son dossier mipmap correspondant. S’y ajoute l’icône de la fiche Google Play, en 512×512, qui ne vit pas dans l’application mais dans la console de publication.

Ce qu’exigent l’App Store et Google Play

Les deux stores publient des règles précises, et les vérifient à la soumission. Les connaître évite un aller-retour de validation qui coûte plusieurs jours.

• App Store : 1024×1024 en PNG, sans transparence. C’est la contrainte la plus souvent ignorée. Une icône contenant une couche alpha est rejetée au moment de l’envoi dans App Store Connect. La case d’aplatissement de l’outil règle le problème à la source.
• App Store : coins droits obligatoires. Les coins arrondis caractéristiques d’iOS sont appliqués automatiquement par le système, avec le rayon exact de chaque contexte d’affichage. Fournissez un carré plein bord à bord : une icône déjà arrondie, entourée de transparence, afficherait des coins découpés deux fois.
• Google Play : 512×512 en PNG 32 bits. L’icône de fiche est téléversée dans la Play Console, indépendamment du binaire de l’application. Depuis 2019, Google lui applique aussi son propre masque d’arrondi : là encore, livrez un carré plein.
• Android : les icônes adaptatives. Dans l’application elle-même, Android moderne compose l’icône à partir de deux calques (fond et premier plan) dessinés sur une grille de 108 dp, dont seule une zone centrale de 66 dp est garantie visible. Le système découpe la forme finale selon le fabricant : cercle, carré arrondi ou goutte. Ce montage en deux calques se fait dans Android Studio ; l’outil fournit les tailles du lanceur historique, qui restent nécessaires pour les appareils plus anciens et servent de repli.

Concevoir une icône qui reste lisible en 48 pixels

Générer les bonnes tailles ne suffit pas : encore faut-il que le dessin survive à la réduction. Une icône d’application se joue sur une surface plus petite qu’un timbre-poste, au milieu de dizaines de concurrentes. Quelques règles de conception font la différence.

• Une silhouette, une idée. Les icônes qui fonctionnent se reconnaissent à leur forme globale avant leurs détails. Un symbole unique, centré, occupant 60 à 80 % de la surface, l’emporte sur toute composition à plusieurs éléments.
• Pas de texte. Un mot lisible en 1024 pixels devient un gribouillis en 48. Le nom de l’application s’affiche de toute façon sous l’icône : l’y répéter gaspille la surface. Une lettre unique très dessinée peut fonctionner, une phrase jamais.
• Pas de photo. Les photographies perdent tout relief à petite taille et vieillissent mal. Préférez un aplat, un dégradé maîtrisé ou une forme vectorielle.
• Du contraste avec les fonds réels. Votre icône vivra sur des fonds d’écran clairs, sombres et chargés. Testez-la sur les trois. Un fond de marque plein protège mieux qu’un motif fin qui se noie.
• Le test des 48 pixels. Réduisez l’aperçu généré à sa taille mdpi et regardez-le à distance de bras. Si l’intention n’est plus évidente, simplifiez le dessin et régénérez le pack : l’opération prend une minute.

Une fois l’icône arrêtée, vérifiez la cohérence de l’ensemble de la fiche : l’aperçu de fiche App Store permet de juger icône, nom et captures ensemble, dans les conditions réelles d’affichage.

Intégrer le pack dans Xcode et Android Studio

Le ZIP est organisé pour que l’intégration se limite à des glisser-déposer, sans renommage manuel.

Dans Xcode. Le dossier ios/AppIcon.appiconset contient chaque PNG accompagné d’un fichier Contents.json qui déclare, pour chaque image, son rôle (idiom), sa taille en points et son facteur d’échelle. Ouvrez le catalogue d’assets de votre projet (Assets.xcassets), supprimez l’AppIcon existant s’il est vide, puis glissez le dossier AppIcon.appiconset entier depuis le Finder : Xcode reconnaît le Contents.json et remplit toutes les cases d’un coup. Si une case reste vide, c’est qu’un fichier a été renommé ; reprenez l’archive d’origine.

Dans Android Studio. Le dossier android/ reproduit l’arborescence res/ du projet : mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi et mipmap-xxxhdpi, chacun contenant son ic_launcher.png à la bonne taille. Copiez ces dossiers dans app/src/main/res/ en fusionnant avec l’existant. Pour l’icône adaptative, ouvrez ensuite l’assistant intégré (clic droit sur res, puis New et Image Asset) : il compose les deux calques et conserve vos PNG comme icônes de repli.

Dans la Play Console. L’icône play-store/icon-512.png se téléverse dans la fiche du magasin, section de la fiche principale. Elle doit rester visuellement identique à l’icône embarquée dans l’application : une différence marquée entre les deux fait partie des motifs de rejet des fiches.

Les erreurs qui font perdre du temps

Certaines erreurs reviennent dans la plupart des premiers dépôts. Toutes se détectent avant soumission.

• La transparence oubliée. Le logo exporté depuis un outil de design part souvent en PNG transparent. Sur l’App Store, c’est un rejet automatique. L’aplatissement sur fond blanc, ou mieux, sur la couleur de fond de votre marque, doit être un réflexe.
• Les coins arrondis en dur. Une icône livrée déjà arrondie ressort avec un liseré transparent une fois le masque du système appliqué. Fournissez du plein format.
• L’agrandissement d’une petite source. Générer un 1024 à partir d’un 512 produit un flou visible sur la vitrine App Store, l’endroit le plus exposé. Le sens de fabrication va toujours du grand vers le petit.
• Des marges internes incohérentes. Si votre symbole flotte dans un carré avec de grandes marges, il paraîtra minuscule à côté des icônes qui occupent leur surface. Comparez dans l’aperçu généré avant de valider.
• La reprise d’éléments d’autres marques. Imiter l’icône d’une application connue ou intégrer un logo qui ne vous appartient pas expose au rejet et à la réclamation du titulaire de la marque. Les deux stores traitent ces signalements en donnant raison au déposant.

Enfin, gardez la main légère sur le poids des fichiers : les PNG générés sont propres, mais si vos autres visuels de fiche pèsent lourd, le compresseur d’images les allège sans les abîmer, et l’encadreur de captures d’écran produit des visuels aux dimensions exactes attendues par les stores.

Questions fréquentes

Pourquoi l’App Store refuse-t-il mon icône pour cause de transparence ?

Apple exige une icône de vitrine 1024×1024 totalement opaque, en PNG sans couche alpha. La plupart des logos exportés depuis un outil de design conservent un fond transparent, ce qui déclenche le refus au moment du téléversement dans App Store Connect. Cochez la case « Aplatir la transparence sur fond blanc » avant de générer le pack : l’outil remplace chaque pixel transparent par un fond opaque et le problème disparaît.

Faut-il arrondir les coins de l’icône avant de l’envoyer ?

Non, jamais. iOS comme Android appliquent leur propre masque d’arrondi, avec un rayon qui varie selon le contexte d’affichage et le fabricant de l’appareil. Une icône livrée déjà arrondie subit un second découpage et laisse apparaître des coins vides. Fournissez un carré plein bord à bord et laissez les systèmes faire leur travail.

Quelle image source donner à l’outil pour un résultat net ?

Un carré de 1024×1024 pixels au minimum, en PNG de préférence, exporté directement depuis votre fichier de design à la définition maximale. Toutes les tailles sont fabriquées par réduction de cette source : une image plus petite serait agrandie pour produire le 1024, avec un flou visible sur la fiche App Store. Si votre source fait 2048 ou plus, c’est encore mieux.

Mon icône est-elle envoyée sur un serveur pendant la génération ?

Non. Le fichier est lu localement par votre navigateur, redimensionné via canvas et assemblé en ZIP par un script exécuté sur votre machine. Aucune requête réseau ne transporte votre image, ce que vous pouvez vérifier dans l’onglet réseau des outils de développement du navigateur. C’est un point qui compte quand l’icône relève d’un projet encore confidentiel.

Que faire pour l’icône adaptative Android ?

L’icône adaptative se compose de deux calques (fond et premier plan) dessinés sur une grille de 108 dp dont la zone centrale de 66 dp est seule garantie visible. Ce montage exige des fichiers séparés que l’assistant Image Asset d’Android Studio assemble en quelques clics. L’outil fournit les cinq tailles du lanceur historique, indispensables comme repli et pour les appareils anciens ; utilisez-les comme base, puis créez les calques adaptatifs dans Android Studio.

Puis-je utiliser une photo comme icône d’application ?

C’est déconseillé. Une photographie perd l’essentiel de son information en dessous de 100 pixels et devient une tache indistincte dans une liste de résultats. Les icônes les plus efficaces reposent sur une forme simple, un contraste franc et une couleur identifiable. Si votre marque est incarnée par une photo, faites-en dériver un symbole graphique plutôt que de la réduire telle quelle.

Le dossier iOS fonctionne-t-il tel quel dans Xcode ?

Oui. Le dossier AppIcon.appiconset contient un Contents.json qui décrit chaque fichier avec son idiome, sa taille en points et son échelle. Glissez le dossier entier dans le catalogue Assets.xcassets de votre projet : Xcode lit le descripteur et place chaque PNG dans la bonne case. Ne renommez aucun fichier après extraction, sinon la correspondance décrite par le Contents.json se rompt.

Pourquoi générer aussi une icône 512 alors qu’iOS demande du 1024 ?

Le 512×512 est le format de l’icône de fiche Google Play, téléversée dans la Play Console indépendamment de l’application. Google exige un PNG 32 bits de cette taille exacte. Elle doit rester cohérente avec l’icône embarquée dans l’APK ou l’App Bundle : un écart visuel important entre les deux fait partie des motifs de refus documentés des fiches Play Store.