Icônes d'app

Chaque application mobile a besoin d'une icône. Expo simplifie la génération d'icônes en prenant une seule image haute résolution et en créant toutes les tailles requises pour iOS et Android.

Tailles requises

Configuration de base

Placez votre icône dans le dossier assets et configurez app.json :

{
  "expo": {
    "icon": "./assets/icon.png"
  }
}

Ce seul PNG 1024x1024 est utilisé pour générer toutes les tailles requises pendant le build.

Exigences pour l'icône

• Format : PNG (pas de transparence pour l'App Store iOS)
• Taille : 1024x1024 pixels minimum
• Forme : Carrée — iOS arrondit les coins automatiquement
• Pas d'alpha : L'App Store iOS rejette les icônes avec transparence

Icônes adaptatives (Android)

Les icônes adaptatives Android ont des couches séparées de premier plan et d'arrière-plan, permettant à l'OS d'appliquer différentes formes (cercle, squircle, carré arrondi) :

{
  "expo": {
    "icon": "./assets/icon.png",
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon-foreground.png",
        "backgroundImage": "./assets/adaptive-icon-background.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}

Concevoir des icônes adaptatives

L'image de premier plan doit :

• Faire 108x108 dp (432x432 px en xxxhdpi)
• Garder le logo dans la zone sûre (cercle central de 66dp / 264px)
• Avoir un fond transparent

Vous pouvez utiliser une couleur unie au lieu d'une image de fond :

{
  "android": {
    "adaptiveIcon": {
      "foregroundImage": "./assets/adaptive-icon-foreground.png",
      "backgroundColor": "#3B82F6"
    }
  }
}

Configuration spécifique iOS

Pour une icône différente sur iOS :

{
  "expo": {
    "ios": {
      "icon": "./assets/ios-icon.png"
    }
  }
}

Favicon (Web)

Si votre app Expo fonctionne aussi sur le web :

{
  "expo": {
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Outils de génération

Commencez avec une image source 1024x1024 et utilisez ces outils :

Conseils de design

1. Restez simple — L'icône est petite à l'écran, les détails fins se perdent
2. Utilisez des couleurs vives — Ressortez sur les fonds d'écran clairs et sombres
3. Évitez le texte — Le texte est illisible en petite taille
4. Testez sur l'appareil — Vérifiez le rendu sur l'écran d'accueil réel
5. Vérifiez les fonds sombres — Assurez la visibilité sur les écrans d'accueil en mode sombre

Icône de build de développement

Ajoutez un bandeau pour distinguer les builds de dev de la production :

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {},
          "ios": {}
        }
      ]
    ]
  }
}

Un pattern courant est d'ajouter un bandeau "DEV" aux icônes de build de développement pour pouvoir les distinguer de la version App Store sur votre appareil.

Vérifier vos icônes

Après le build, vérifiez que les icônes sont correctes :

# Build de preview
eas build --profile preview --platform ios
eas build --profile preview --platform android

Installez le build sur votre appareil et vérifiez l'apparence de l'icône sur l'écran d'accueil.