Icons ionic app

Comment générer les icons et les splashscreens d’une application Ionic ?

Quelle est la première chose que vos utilisateurs voient de votre application, avant même son téléchargement ? Son icône. Et lors de son premier démarrage ? Une image de démarrage appelée « splashscreen ».

L’icône et l’image de démarrage sont des éléments importants de toute application mobile. Pourtant, leur génération est souvent fastidieuse pour les graphistes et les développeurs. Chaque plate-forme (iOS, Android) requiert ces fichiers image en plusieurs exemplaires, avec des formats et des dimensions variés.

Heureusement, les équipes d’Ionic nous félicitent grandement la tâche en proposant la génération automatique de ces différentes images à partir d’une image de base. Ce service est gratuit et est inclus dans l’outil en ligne de commande Ionic CLI.

1. Marche à suivre

  1. Créez les fichiers image icon.png et splash.png à l’aide de Photoshop, Illustrator ou Sketch. icon.png doit être carré, d’une dimension minimale de 192×192px, splash.png doit être carré, d’une dimension minimale de 2208×2208px.
  2. Installez Ionic CLI : sudo npm install -g ionic
  3. Dans le répertoire de votre application, créez le dossier resources/ (au même niveau que platforms/ ou encore www/)
  4. Déposez les fichiers icon.png et splash.png dans le dossier resources/
  5. Exécutez la commande ionic resources

Et voilà ! Tout le travail de redimensionnement est exécuté par Ionic et les lignes de configuration sont automatiquement ajoutées au fichier config.xml de votre projet. Si les modifications ne sont pas prises en compte lors du prochain build, n’hésitez pas à retirer puis à ajouter à nouveau les plate-formes avec cordova platform remove ios android et cordova platform add ios android.

2. Templates Photoshop

L’image de base carrée splash.png sera rognée par Ionic pour créer des images rectangulaires au format portrait ou paysage. C’est pourquoi il faut faire attention à ne pas inclure des éléments importants (du texte ou un logo par exemple) en dehors d’une zone de 1200×1200px au centre de l’image. Pour nous aider, Ionic nous propose des templates Photoshop sur lesquels nous appuyer pour réaliser les fichiers de base :

3. Pour aller plus loin

Vous pouvez générer uniquement les fichiers icônes avec la commande ionic resources --icon et uniquement les fichiers de splashscreen avec la commande ionic resources --splash.

Ionic

Besoin d'un développeur Ionic freelance ? Contactez-nous !

Par e-mail : tristan@developpeur-ionic.fr