Passer au contenu principal
Les icônes de notification push sont de petites images qui apparaissent à côté de vos notifications. Elles aident les utilisateurs à reconnaître rapidement votre marque, à comprendre le contexte et à distinguer vos messages des autres. Chaque plateforme gère les icônes différemment, il est donc essentiel de suivre les normes spécifiques à la plateforme pour garantir que vos notifications s’affichent correctement. Ce guide couvre les icônes de notification push. Si vous recherchez de grandes images, consultez Images et médias enrichis.

​
Meilleures pratiques pour les icônes de notification push

  • Utilisez des images PNG avec transparence dans la mesure du possible.
  • Gardez les icônes simples et reconnaissables même à très petite taille.
  • Évitez le texte ou les détails fins qui peuvent devenir illisibles.
  • Suivez les règles spécifiques à la plateforme pour la taille, la couleur et la transparence.
  • Testez les notifications sur de vrais appareils sur différentes plateformes et versions d’OS.

​
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.
  • Formats pris en charge : PNG, JPG, GIF (non animé)
  • L’icône doit être carrée. La taille recommandée est de 256x256 pixels.
Différents navigateurs (Chrome, Edge, Safari, Firefox) peuvent recadrer ou redimensionner les icônes différemment selon l’appareil et le système d’exploitation. Une icône carrée de 256x256 est recommandée pour garantir un affichage cohérent sur tous les navigateurs.
Définissez l’icône par défaut dans Paramètres du tableau de bord > Push et In-App > Paramètres 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 pour plus de détails.

​
Icône de badge push web Android

Sur les appareils Android, les notifications Web Push peuvent afficher une icône de badge plus petite définie par la propriété badge du manifeste d’application web. L’icône de badge est utilisée dans des contextes d’interface utilisateur limités (comme la barre d’état Android) et peut ne pas apparaître sur tous les appareils Android. Bien que les icônes de badge ne soient pas soumises aux mêmes règles strictes d’alpha uniquement que les petites icônes de notification d’applications Android, elles sont toujours rendues dans une interface utilisateur contrôlée par le système. Meilleures pratiques :
  • Utilisez un PNG carré avec un fond transparent
  • Gardez le design simple et à fort contraste
  • Évitez le texte ou les détails fins
  • Utilisez du monochrome ou une couleur minimale pour une meilleure cohérence
Une taille minimale de 72×72 pixels est recommandée. Les images plus grandes sont acceptables et seront réduites si nécessaire.
Contrairement aux petites icônes de notification d’applications Android, les icônes de badge Web Push peuvent conserver la couleur sur certains appareils. Cependant, les icônes en couleur complète ou complexes peuvent être rendues de manière incohérente selon la version Android, le navigateur et le fabricant de l’appareil.
Consultez Envoyer des notifications avec des icônes non par défaut pour plus de détails.

​
Icônes de notification iOS

Les notifications iOS utilisent toujours l’icône de votre application.
  • L’icône de notification est automatiquement dérivée de la ressource d’icône de votre application
  • Vous ne pouvez pas modifier l’icône de notification par message
  • Modifier l’icône nécessite de mettre à jour l’icône de votre application et de publier une nouvelle version de l’application
Il n’existe aucun champ de charge utile APNs qui vous permet de spécifier une icône de notification personnalisée sur iOS.Ce comportement est appliqué par iOS et s’applique aux notifications push standard, aux alertes critiques et aux activités en direct.

​
Notifications de communication

Sur iOS 15 et versions ultérieures, Apple prend en charge les Notifications de communication. Lorsqu’elles sont correctement implémentées, les notifications de type communication (telles que les applications de messagerie ou d’appel) peuvent afficher une image de contact ou d’expéditeur au lieu de l’icône de l’application dans les vues système prises en charge.
Les Notifications de communication sont limitées à des cas d’usage spécifiques et nécessitent l’adoption explicite des API de notification de communication d’Apple. Elles ne sont pas disponibles pour les notifications à usage général.

​
Icônes de notification Android

Android (y compris les appareils Amazon et Huawei) prend en charge les icônes de notification petites et grandes. Android prend également en charge les Notifications de conversation qui vous permettent de remplacer l’icône par l’image de profil de l’utilisateur.
Sur Android 8.0+ (API 26+), l’apparence des notifications est fortement influencée par l’interface utilisateur système, les canaux de notification et les personnalisations du fabricant de l’appareil.
Placement de l'icône de notification Android

​
Petites icônes de notification

La petite icône de notification apparaît dans la barre d’état et en haut à gauche de la notification. Si aucune petite icône personnalisée n’est fournie, OneSignal affiche une icône de cloche par défaut. Android rend les petites icônes de notification en utilisant le canal alpha de l’icône, et non ses données de couleur. Le système applique sa propre teinte (ou votre couleur d’accentuation configurée) lors de l’affichage de l’icône. Exigences et meilleures pratiques :
  • 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 et recommandée consiste à concevoir l’icône sous forme d’illustration blanche sur fond transparent, mais techniquement 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 peuvent s’afficher incorrectement, apparaissant souvent comme un carré blanc, une forme tronquée ou une silhouette inattendue, selon le fabricant de l’appareil et la version Android.Android ignore souvent les informations de couleur dans les petites icônes de notification et dérive l’apparence finale du canal alpha et de la teinte définie par le système ou l’application.

​
Couleur d’accentuation de la petite icône

Vous pouvez modifier la couleur affichée autour de la petite icône de la notification.
Pour définir une couleur par défaut, ajoutez la ligne suivante à votre fichier res/values/strings.xml dans votre projet. Si vous souhaitez une couleur différente pour le mode sombre, ajoutez également la clé à votre res/values-night/strings.xml. Utilisez la valeur HEX. Utilisez le schéma de couleurs Android Asset Studio pour obtenir de l’aide. 
<resources>
    <string name="onesignal_notification_accent_color">FF00FF00</string>
</resources>
Pour définir la couleur par notification, définissez android_accent_color dans notre appel d’API Créer une notification ou saisissez une valeur dans le champ Couleur d’accentuation sous Messages > Nouveau Push > Paramètres de plateforme > Options Google Android.
Si vous avez récemment ajouté une ressource d’icône à votre application, vous voudrez peut-être attendre quelques jours avant d’envoyer des notifications utilisant l’icône. En effet, il peut falloir plusieurs jours, voire plusieurs semaines, pour que la majorité de vos utilisateurs mettent à jour leurs applications vers la dernière version contenant vos nouvelles icônes.

​
Images de petite icône personnalisées sans canal alpha

Certains fabricants d’appareils affichent l’image telle quelle (en ignorant la règle du canal alpha). Vous pouvez configurer une mise en page de notification personnalisée basée sur la documentation d’Android si vous souhaitez utiliser des images sans canal alpha sur tous les appareils. Nous vous recommandons vivement de suivre la règle alpha car les icônes peuvent ne pas être cohérentes sur tous les appareils. Google l’a conçu ainsi : l’icône est trop petite pour voir des détails significatifs, donc imposer une seule couleur aide à rendre l’icône plus facile à reconnaître d’un coup d’œil.

​
Grandes icônes de notification

La grande icône apparaît sur le côté droit de la notification Android.
  • Taille recommandée : 256×256 pixels
  • Format : PNG ou JPG
  • Si non définie, Android peut réutiliser la petite icône

​
Comment ajouter des icônes Android par défaut

Nous recommandons vivement de configurer des icônes de notification par défaut pour chaque application basée sur Android (Google Play, Amazon, Huawei). Les icônes manquantes ou mal configurées sont la cause la plus courante de rendu de notification défectueux. Android prend en charge deux icônes par défaut :
  • Petite icône de notification (obligatoire)
  • Grande icône de notification (facultative mais recommandée)
1

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

La petite icône de notification apparaît dans la barre d’état et l’en-tête de notification.Exigences :
  • Icône de silhouette monochrome
  • Fond transparent (canal alpha requis)
  • Pas de couleurs, dégradés ou ombres
Une approche courante et recommandée est une icône blanche sur fond transparent, mais Android utilise le canal alpha, et non la couleur blanche elle-même.
Le moyen le plus rapide et le plus sûr de générer de petites icônes conformes est d’utiliser Android Asset Studio – Icônes de notification.
Nom de l’icône : ic_stat_onesignal_default
2

Créer les tailles de petite icône requises

Obligatoire : Vous devez inclure 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.
Nom de l’icôneDensité (dp)Taille (px)
ic_stat_onesignal_defaultMDPI24x24
ic_stat_onesignal_defaultHDPI36x36
ic_stat_onesignal_defaultXHDPI48x48
ic_stat_onesignal_defaultXXHDPI72x72
ic_stat_onesignal_defaultXXXHDPI96x96
3

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

Meilleures pratiques :
  • Image carrée
  • PNG ou JPG
  • Fond transparent recommandé
  • Taille recommandée : 256×256 px
Contrairement aux petites icônes :
  • La couleur est autorisée
  • L’alpha uniquement n’est pas requis
  • 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

Chaque icône doit être placée dans le répertoire de ressources correct pour votre framework. Assurez-vous que les chemins suivants existent ; créez tous les dossiers qui vous manquent.Obligatoire : Chaque image doit être présente dans les chemins suivants :
  • res/drawable-mdpi/ (24x24)
  • res/drawable-hdpi/ (36x36)
  • res/drawable-xhdpi/ (48x48)
  • res/drawable-xxhdpi/ (72x72)
  • res/drawable-xxxhdpi/ (96x96)
  • res/drawable-xxxhdpi/ (256x256) (Large Icon)
Votre projet devrait ressembler à ceci (selon votre SDK) :
Si vous voyez un carré plein au lieu de votre icône, l’image n’a pas la transparence appropriée.
Si vous voyez l’icône de cloche OneSignal, une ou plusieurs tailles de petite icône requises sont manquantes ou placées dans le mauvais répertoire.
Votre application Android est maintenant correctement configurée avec des icônes de notification par défaut.

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

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

​
Paramètres de l’API REST

Paramètres de l’API REST Android, Amazon et Huawei :
​
small_icon
string
Amazon : adm_small_icon Huawei : huawei_small_iconPour la petite icône, l’image doit exister dans le même chemin de projet que la petite icône par défaut. Elle ne peut pas utiliser d’URL distante. Consultez Comment ajouter des icônes Android par défaut pour plus de détails sur l’emplacement où ajouter vos icônes personnalisées.Définissez le nom de l’icône sans l’extension de fichier dans les paramètres de l’API REST.Exemple : "small_icon": "my_custom_icon_name_without_extension"
​
large_icon
string
Amazon : adm_large_icon Huawei : huawei_large_iconPour la grande icône, l’image peut exister dans le même chemin de projet que la grande icône par défaut ou en tant qu’URL distante. Consultez Comment ajouter des icônes Android par défaut pour plus de détails sur l’emplacement où ajouter vos icônes personnalisées.Définissez le nom de l’icône sans l’extension de fichier dans les paramètres de l’API REST.Exemple : "large_icon": "my_custom_icon_name_without_extension"
Paramètre de l’API REST Web Push :
​
chrome_web_icon
string
Firefox : firefox_iconL’URL de la ressource d’image. Doit être l’URL directe de la ressource d’image.Exemple : "chrome_web_icon": "https://example.com/my_custom_icon.png"
​
chrome_web_badge
string
L’URL de la ressource d’image. Doit être l’URL directe de la ressource d’image.Exemple : "chrome_web_badge": "https://example.com/my_custom_icon.png"

​
Tableau de bord

Dans le tableau de bord OneSignal, en utilisant le formulaire Messages > Push > Nouveau Push ou Modèles, accédez aux 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. Avec les grandes icônes de notification, vous pouvez également fournir une URL directe d’où l’icône sera affichée.