Aller au contenu principal

Guide : Icône de l'application

📋 Prérequis​

Vous avez besoin d'une image pour votre icône :

  • Format recommandé : PNG avec fond transparent
  • Taille recommandée : 1024x1024 pixels minimum
  • Forme : Carrée (le système ajoutera automatiquement les arrondis)

🎨 Étape 1 : Préparer votre icône​

Option 1 : Vous avez déjà une icône​

Placez votre fichier app_icon.png (1024x1024) dans :

assets/icon/app_icon.png

Option 2 : Créer une icône simple​

Si vous n'avez pas encore d'icône, vous pouvez :

  1. Utiliser un générateur en ligne :

  2. Créer avec un logo/texte :

    • Taille : 1024x1024 px
    • Fond coloré ou transparent
    • Logo/texte centré

Option 3 : Icône temporaire pour tester​

Vous pouvez télécharger une icône temporaire :

# Exemple avec une icône placeholder
curl -o assets/icon/app_icon.png https://via.placeholder.com/1024x1024/3B82F6/FFFFFF?text=K

🚀 Étape 2 : Générer les icônes​

Une fois votre fichier app_icon.png en place :

# Installer les dépendances
flutter pub get

# Générer les icônes pour Android et iOS
flutter pub run flutter_launcher_icons

Vous verrez :

✓ Successfully generated launcher icons

✅ Étape 3 : Vérifier les icônes​

Android​

Les icônes sont générées dans :

android/app/src/main/res/
├── mipmap-hdpi/ic_launcher.png
├── mipmap-mdpi/ic_launcher.png
├── mipmap-xhdpi/ic_launcher.png
├── mipmap-xxhdpi/ic_launcher.png
└── mipmap-xxxhdpi/ic_launcher.png

iOS​

Les icônes sont générées dans :

ios/Runner/Assets.xcassets/AppIcon.appiconset/

📱 Étape 4 : Tester​

# Nettoyer le build
flutter clean

# Relancer l'app
flutter run

L'icône devrait maintenant apparaître :

  • Dans le lanceur d'applications
  • Dans la barre de tâches (Android)
  • Sur l'écran d'accueil

🎯 Options avancées​

Icône adaptative Android​

Pour une meilleure apparence sur Android 8.0+ :

  1. Créez deux images :

    • app_icon_foreground.png : Logo/icône (transparent)
    • Couleur de fond : dans la config

  2. Modifiez pubspec.yaml :

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

  # Icône adaptative Android
  adaptive_icon_background: "#3B82F6"  # Votre couleur
  adaptive_icon_foreground: "assets/icon/app_icon_foreground.png"
  1. Régénérez :
flutter pub run flutter_launcher_icons

Icônes personnalisées par plateforme​

flutter_launcher_icons:
  android: "ic_launcher"
  ios: true
  image_path_android: "assets/icon/android_icon.png"
  image_path_ios: "assets/icon/ios_icon.png"

Désactiver les bordures arrondies iOS​

flutter_launcher_icons:
  ios: true
  image_path: "assets/icon/app_icon.png"
  remove_alpha_ios: true  # Enlève la transparence

🔧 Dépannage​

Problème : "Image not found"​

Solution :

# Vérifier que le fichier existe
ls -la assets/icon/app_icon.png

# Si le dossier n'existe pas
mkdir -p assets/icon

Problème : L'icône ne change pas​

Solution :

# Nettoyer complètement
flutter clean

# Désinstaller l'app de l'appareil
# Puis relancer
flutter run

Problème : Icône floue ou pixelisée​

Cause : Image source trop petite

Solution :

  • Utilisez une image d'au moins 1024x1024 px
  • Format PNG de haute qualité

Problème : Icône coupée sur Android​

Cause : Zone sûre non respectée

Solution :

  • Laissez 20% de marge autour de votre logo
  • Utilisez l'icône adaptative (adaptive_icon)

📐 Tailles recommandées​

PlateformeTaille sourceFormat
Android1024x1024PNG
iOS1024x1024PNG
Web512x512PNG/ICO

🎨 Bonnes pratiques​

  1. ✅ Simple et reconnaissable : L'icône doit être claire même en petit
  2. ✅ Contraste élevé : Pour être visible sur tous les fonds
  3. ✅ Sans texte : Ou texte très limité (1-2 lettres max)
  4. ✅ Forme carrée : Le système gère les arrondis
  5. ✅ Couleurs cohérentes : Avec votre marque

📝 Exemples de configuration​

Configuration minimale​

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

Configuration complète​

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

  # Android adaptative
  adaptive_icon_background: "#3B82F6"
  adaptive_icon_foreground: "assets/icon/foreground.png"

  # Personnalisation
  min_sdk_android: 21
  remove_alpha_ios: true

  # Web (optionnel)
  web:
    generate: true
    image_path: "assets/icon/web_icon.png"

🚀 Checklist complète​

  • Image d'icône créée (1024x1024 PNG)
  • Fichier placé dans assets/icon/app_icon.png
  • Package flutter_launcher_icons ajouté
  • Configuration dans pubspec.yaml
  • flutter pub get exécuté
  • flutter pub run flutter_launcher_icons exécuté
  • flutter clean exécuté
  • App relancée avec flutter run
  • Icône visible dans le lanceur ✨

🔗 Ressources​