Skip to main content
Définissez des icônes de notification push pour que les utilisateurs puissent reconnaître votre application dans le volet des notifications et sur l’écran de verrouillage. Android, iOS et le Web utilisent chacun une source d’icône différente. Pour les grandes images attachées aux notifications, consultez Images et médias enrichis.
Push notification with a small badge icon, large icon, and image

Exemple d'une notification Web Push Android Chrome avec petite icône de badge, grande icône et image.

Icônes de notification Android

Android (y compris les appareils Amazon et Huawei) prend en charge les icônes de notification petites et grandes. Sur Android 8.0+ (API 26+), les catégories de notification et l’interface utilisateur du fabricant influencent également l’apparence de la notification. Android prend également en charge les Notifications de conversation qui peuvent afficher l’image de profil d’une personne à la place de votre icône.
Android notification showing small icon, large icon, and accent color placement

Petites icônes de notification

La petite icône de notification est obligatoire. Elle apparaît dans la barre d’état sous forme de silhouette monochrome. Si vous ne fournissez pas de petite icône personnalisée, OneSignal utilise une icône de cloche par défaut. Le placement de l’icône sur la notification change dans Android 17 (API 37). Consultez Icône de lancement sur la notification. Android rend les petites icônes de notification en utilisant le canal alpha de l’icône, et non ses données de couleur. À partir d’Android 12 (API 31), le système teinte cette silhouette avec la couleur d’accentuation de notification que vous définissez. Si vous ne définissez pas de couleur, il utilise la couleur du thème système. Consultez Android notification design. Exigences :
  • Utilisez une icône de silhouette monochrome sur un fond transparent
  • Concevez l’icône de sorte que la forme soit définie par la transparence, et non par la couleur
  • Évitez les dégradés, les ombres ou les illustrations multicolores
  • Gardez le design simple et reconnaissable même à très petite taille
Une approche courante consiste en une illustration blanche sur fond transparent. Android utilise le masque alpha, et non la couleur blanche elle-même.
Les icônes avec des fonds pleins ou des illustrations en couleur complète s’affichent souvent comme un carré blanc, une forme tronquée ou une silhouette inattendue. Android ignore la couleur dans les petites icônes de notification et dérive l’apparence du canal alpha plus la teinte du système ou de l’application.
Vous ne pouvez pas forcer une petite icône en couleur complète sur Android stock. Les mises en page de notification personnalisées sur Android 12 (API 31) et les versions ultérieures affichent toujours la petite icône teintée par le système. Certains fabricants ignorent le canal alpha et affichent une image en couleur complète. Ne vous y fiez pas. Fournissez toujours une icône conforme à la règle du canal alpha.

Icône de lancement sur la notification (Android 17)

À partir d’Android 17 (API 37), Android affiche l’icône de lancement de votre application sur la notification à la place de la petite icône. La petite icône apparaît toujours dans la barre d’état. Il s’agit d’un comportement du système Android qui s’applique à toutes les notifications, et l’apparence exacte peut varier selon le fabricant de l’appareil. Pour afficher la petite icône sur la notification à la place, définissez l’extra Android EXTRA_PREFER_SMALL_ICON. Le SDK OneSignal ne définit pas cet extra par défaut. Ajoutez-le dans votre extension de service de notification. Annotez la classe avec @Keep et enregistrez-la dans le manifeste comme indiqué sur cette page.
La clé sous forme de chaîne fonctionne avec n’importe quelle version de compileSdk. Android 16 (API 36) et les versions antérieures ignorent l’extra, il est donc sûr de le définir sans condition.

Couleur d’accentuation de la petite icône

Vous pouvez définir la couleur d’accentuation de notification qu’Android 12 (API 31) et les versions ultérieures utilisent pour teinter la petite icône. Elle correspond à Notification.color (setColor) d’Android. Ce n’est pas la même chose que la colorisation de l’arrière-plan de la notification (setColorized), qu’Android réserve aux tâches en cours de haute priorité. La couleur d’accentuation est une propriété par notification, et non une propriété de canal. Les catégories de notification Android contrôlent le son, l’importance, la vibration, la couleur de la LED et les badges. Les catégories n’ont pas de paramètre de couleur d’accentuation, et votre couleur d’accentuation s’applique quelle que soit la catégorie sur laquelle la notification s’affiche.
Sur Android 17 (API 37) et les versions ultérieures, la couleur d’accentuation peut ne pas être visible sur la notification lorsque l’icône de lancement est affichée. La petite icône de la barre d’état est toujours teintée.
Android notification showing small icon accent color
Le SDK résout la couleur d’accentuation dans cet ordre. La première valeur trouvée l’emporte :
  1. Par message : le paramètre android_accent_color (Google Android) ou huawei_accent_color (Huawei) dans l’API Créer un message, ou le champ Accent color sous Messages > Push > New Push > Platform Settings > Google Android Options.
  2. Valeur par défaut de l’application via les ressources : la ressource de chaîne onesignal_notification_accent_color.
  3. Valeur par défaut de l’application via le manifeste : l’entrée meta-data com.onesignal.NotificationAccentColor.DEFAULT dans AndroidManifest.xml.
Utilisez une valeur hexadécimale ARGB sans # (par exemple, FF00FF00). Vous pouvez prévisualiser les couleurs dans Android Asset Studio. Pour définir une couleur par défaut avec les ressources, ajoutez la ligne suivante à votre fichier res/values/strings.xml. Pour une couleur différente en mode sombre, ajoutez la même clé à res/values-night/strings.xml.
Pour définir la valeur par défaut dans le manifeste à la place, ajoutez ceci à l’intérieur de la balise <application> :
Pour un contrôle total au moment de l’affichage, définissez la couleur depuis une extension de service de notification en utilisant notification.setExtender avec builder.setColor(). L’extender s’exécute après que le SDK a appliqué les valeurs ci-dessus, il les remplace donc toutes.

Grandes icônes de notification

La grande icône est facultative. Elle apparaît sur le côté droit de la notification. Les recommandations de conception d’Android sont de l’utiliser uniquement lorsque l’image renforce le contenu de la notification, comme la photo d’un expéditeur, le logo d’une source tierce ou un symbole significatif. N’utilisez pas la grande icône comme une seconde icône d’application ou à des fins de marque. Consultez The large icon.
  • Taille recommandée : 256×256 pixels
  • Format : PNG ou JPG
  • La couleur est autorisée. L’alpha uniquement n’est pas requis.
Si vous ne définissez pas de grande icône, cet emplacement reste vide sur Android stock. Certains fabricants affichent l’icône de lancement de l’application à la place.

Comment ajouter des icônes Android par défaut

Configurez des icônes par défaut pour chaque application basée sur Android (Google Play, Amazon, Huawei). Terminez d’abord la Configuration du SDK Android (ou votre configuration multiplateforme). Ajoutez les fichiers aux répertoires de ressources de votre projet (ou à une configuration de plugin pour Expo), recompilez et publiez. Les fichiers manquants ou mal nommés sont la cause la plus courante de rendu défectueux. Les icônes par défaut sont intégrées dans le binaire de l’application. Elles ne sont pas téléchargées sur le tableau de bord OneSignal. Après la publication, attendez que la plupart des utilisateurs aient mis à jour avant d’envoyer des notifications qui dépendent d’un nouveau nom d’icône.
1

Générer la petite icône de notification

Générez une silhouette sur fond transparent à l’aide d’Android Asset Studio – Icônes de notification. Suivez les exigences de la petite icône.Nom de l’icône : ic_stat_onesignal_default
2

Créer les tailles de petite icône requises

Incluez toutes les variantes de densité pour la petite icône. L’absence d’une taille peut amener Android à revenir à une icône système par défaut. Ces tailles correspondent à 24dp à chaque densité, ce qui est la taille des icônes de la barre d’état Android.
3

Générer la grande icône de notification (facultatif)

Utilisez un PNG ou JPG de 256×256. La couleur est autorisée. Une seule taille est nécessaire.Nom de fichier requis : ic_onesignal_large_icon_default.png
4

Placer les icônes dans les chemins de projet corrects

Créez tous les dossiers manquants. Placez chaque densité de la petite icône dans son dossier drawable. Placez la grande icône dans drawable-xxxhdpi/ à côté de la petite icône XXXHDPI. Les deux fichiers partagent un dossier et utilisent des noms différents.
Petites icônes (ic_stat_onesignal_default) :
  • res/drawable-mdpi/ (24×24)
  • res/drawable-hdpi/ (36×36)
  • res/drawable-xhdpi/ (48×48)
  • res/drawable-xxhdpi/ (72×72)
  • res/drawable-xxxhdpi/ (96×96)
Grande icône (ic_onesignal_large_icon_default.png, 256×256) :
  • res/drawable-xxxhdpi/
Votre projet devrait ressembler à ceci (selon votre SDK) :
Android project directory structure showing icon files in drawable folders

Projet Android Native avec les fichiers d'icônes dans les dossiers drawable

Votre application Android est maintenant configurée avec des icônes de notification par défaut. Si vous voyez un carré plein ou la cloche OneSignal, consultez la FAQ.

Icônes de notification iOS

Les notifications iOS utilisent toujours l’icône de votre application. Le système affiche une grande version de cette icône au bord avant de chaque notification et la met à l’échelle à partir de la ressource d’icône de votre application. Vous ne pouvez pas la modifier par message. Pour la modifier, mettez à jour l’icône de l’application et publiez une nouvelle version de l’application. Consultez Human Interface Guidelines: Notifications.
La charge utile APNs contient alert, badge et sound. Elle n’a aucun champ pour une icône de notification personnalisée. Apple ignore les clés personnalisées à l’intérieur du dictionnaire aps. Cela s’applique aux notifications push standard et aux alertes critiques. L’interface des Live Activities peut afficher ses propres images via ActivityKit. Ce n’est pas un remplacement de l’icône de notification.

Notifications de communication

Sur iOS 15 et versions ultérieures, Apple prend en charge les Notifications de communication pour les applications de messagerie et d’appel. Après avoir donné un INSendMessageIntent ou un INStartCallIntent, le système peut afficher l’avatar de l’expéditeur ou de l’appelant (INImage) à la place de la grande icône d’application. L’icône d’application apparaît toujours sous forme de petit badge sur cet avatar. Cela nécessite la capacité Communication Notifications, des intents SiriKit et une Notification Service Extension pour mettre à jour le contenu de la notification. Ce n’est pas disponible pour les notifications à usage général.

Icônes de notification web

Les notifications push web affichent une icône fournie lors de l’envoi ou définie par défaut dans les paramètres de votre site. Si aucune icône n’est fournie, une icône de cloche par défaut est utilisée.
  • Formats pris en charge : PNG, JPG, GIF (non animé)
  • L’icône doit être carrée. La taille recommandée est de 256×256 pixels. web.dev cite 64dp sur Android, donc 192×192 ou plus est le minimum habituel. 256×256 reste la taille la plus cohérente sur Chrome, Firefox, Edge et Safari.
  • Les navigateurs et systèmes d’exploitation recadrent et redimensionnent l’icône différemment. Chrome et Firefox utilisent l’interface de notification de la plateforme lorsqu’elle existe.
Définissez l’URL de l’icône par défaut dans Settings > Push & In-App > Web. Consultez Configuration du SDK Web. Vous pouvez également remplacer l’icône par notification à l’aide du tableau de bord ou de l’API REST. Consultez Envoyer des notifications avec des icônes non par défaut.

Icône de badge push web Android

Sur Android, le push web Chrome peut afficher une icône de badge plus petite dans la barre d’état lorsqu’il n’y a pas assez de place pour la notification complète. OneSignal l’envoie avec chrome_web_badge, qui correspond à l’option badge de l’API Notifications. Chrome sur Android utilise ce badge. Si vous n’en définissez pas, Chrome utilise l’icône du navigateur. Les autres navigateurs affichent généralement l’icône du navigateur. Consultez Notification: badge. Ce n’est pas un badge d’icône d’application (point ou nombre). Pour ceux-là, consultez Badges. Traitez le badge comme une icône monochrome. MDN indique qu’Android masque automatiquement l’image. Utilisez une silhouette PNG carrée sur fond transparent (mêmes règles que la petite icône Android). Évitez le texte, les détails fins et les illustrations en couleur complète. MDN recommande environ 96×96 pixels pour que l’image tienne à 4x. 72×72 est le minimum habituel (24dp à 3x). Les images plus grandes sont réduites.
Android status bar showing a web push badge icon

Exemple de l'affichage de l'icône de badge dans la barre d'état Android.

Envoyer des notifications avec des icônes non par défaut

Lorsque vous envoyez un push depuis le tableau de bord OneSignal ou l’API REST, vous pouvez remplacer les icônes par défaut pour Android, Amazon, Huawei et Web Push. Vous ne pouvez pas remplacer l’icône pour les notifications iOS.

Paramètres de l’API REST

Android, Amazon et Huawei :
string
Nom de la ressource d’icône sans l’extension de fichier. L’image doit exister dans les mêmes dossiers de projet que la petite icône par défaut. Les URL distantes ne sont pas prises en charge. Consultez Comment ajouter des icônes Android par défaut.Pour Amazon, utilisez adm_small_icon. Pour Huawei, utilisez huawei_small_icon.Exemple : "small_icon": "my_custom_icon"
string
Nom de la ressource d’icône sans l’extension de fichier, ou URL distante. Si vous utilisez un nom de ressource, l’image doit exister dans les mêmes dossiers de projet que la grande icône par défaut. Consultez Comment ajouter des icônes Android par défaut.Pour Amazon, utilisez adm_large_icon. Pour Huawei, utilisez huawei_large_icon.Exemple : "large_icon": "my_custom_icon"
Web Push :
string
URL directe vers la ressource d’image.Pour Firefox, utilisez firefox_icon.Exemple : "chrome_web_icon": "https://example.com/my_custom_icon.png"
string
URL directe vers la ressource d’image utilisée comme badge de barre d’état Android pour les notifications web Chrome.Exemple : "chrome_web_badge": "https://example.com/badge.png"

Tableau de bord

Dans Messages > Push > New Push ou Templates, ouvrez les options spécifiques à la plateforme. Pour Android, Amazon et Huawei, si le fichier existe dans le même chemin de projet que l’icône par défaut, définissez les noms d’icône sans l’extension de fichier. Pour les grandes icônes de notification, vous pouvez également fournir une URL directe.
OneSignal dashboard showing icon override fields in Android platform settings

Tableau de bord OneSignal, où remplacer les icônes par défaut.

FAQ

Pourquoi ma petite icône Android s’affiche-t-elle comme un carré blanc ou gris ?

L’image n’a pas la transparence appropriée. Android rend les petites icônes de notification en utilisant uniquement le canal alpha. Les pixels entièrement opaques avec un fond uni apparaissent comme un carré plein. Régénérez l’icône sous forme de silhouette monochrome sur fond transparent à l’aide d’Android Asset Studio.

Pourquoi l’icône de cloche OneSignal apparaît-elle à la place de mon icône personnalisée ?

Une ou plusieurs variantes de densité requises de la petite icône sont manquantes, placées dans le mauvais répertoire drawable ou mal nommées. Incluez les cinq tailles (MDPI à XXXHDPI) avec le nom de fichier exact ic_stat_onesignal_default. Consultez Comment ajouter des icônes Android par défaut pour les chemins corrects.

Pourquoi les notifications affichent-elles l’icône de mon application au lieu de ma petite icône ?

À partir d’Android 17 (API 37), Android affiche par défaut l’icône de lancement de l’application sur la notification. La petite icône apparaît toujours dans la barre d’état. Pour afficher la petite icône sur la notification, définissez l’extra EXTRA_PREFER_SMALL_ICON dans une extension de service de notification. Consultez Icône de lancement sur la notification.

Puis-je modifier l’icône de notification iOS par message ?

Non. iOS utilise toujours l’icône de votre application pour les notifications push. La charge utile APNs n’a aucun champ d’icône. Modifier l’icône nécessite de mettre à jour la ressource d’icône de votre application et de publier une nouvelle version de l’application. Les applications de messagerie et d’appel peuvent afficher l’avatar d’un expéditeur uniquement en adoptant les Notifications de communication.

Quelle taille doit avoir mon icône de push web ?

Utilisez une image carrée PNG, JPG ou GIF non animé de 256×256 pixels. Différents navigateurs et systèmes d’exploitation peuvent recadrer ou redimensionner l’icône, mais 256×256 est la taille la plus cohérente sur Chrome, Firefox, Edge et Safari.

Puis-je utiliser une URL pour la petite icône Android ?

Non. La petite icône Android doit être un fichier de ressource local intégré à votre application. Seule la grande icône prend en charge les URL distantes.

Comment ajouter des icônes de notification dans Expo ?

Utilisez le onesignal-expo-plugin avec un PNG de petite icône de 96×96 et un PNG de grande icône de 256×256 dans app.json ou app.config.js. Le plugin génère les variantes de densité au moment de la compilation. Consultez l’onglet Expo pour la configuration.

Dois-je télécharger les icônes par défaut sur le tableau de bord OneSignal ?

Non. Les icônes de notification par défaut sont intégrées dans le binaire de votre application, elles ne sont pas téléchargées sur OneSignal. Vous les ajoutez aux répertoires de ressources de votre projet (ou à la configuration du plugin pour Expo), et le SDK OneSignal les utilise automatiquement. Le tableau de bord OneSignal vous permet uniquement de remplacer les icônes par message pour Android et Web Push.

Pages associées

Images et médias enrichis

Joignez des images volumineuses, des GIF et des vidéos aux notifications push.

Configuration du SDK Android

Installez le SDK Android, puis ajoutez des icônes de notification par défaut dans vos dossiers drawable.

Configuration du SDK React Native / Expo

Configurez smallIcons et largeIcons dans le plugin Expo de OneSignal.

Catégories de notifications Android

Créez et gérez des canaux de notification Android pour le son, les vibrations et l’importance.

Configuration du SDK Web

Définissez l’URL de l’icône par défaut dans Settings > Push & In-App > Web.

API de création de message

Envoyez des notifications push avec des icônes personnalisées à l’aide de l’API REST.