Passer au contenu principal
Les icônes de notification push sont de petites images qui accompagnent une notification push, aidant à la reconnaissance de la marque, à la clarté contextuelle et à l’attrait esthétique. Elles sont essentielles pour l’engagement des utilisateurs et l’amélioration de l’efficacité de la notification.

Meilleures pratiques pour les icônes de notification push

  • Utilisez un PNG transparent pour un meilleur rendu sur tous les appareils.
  • Assurez-vous que l’icône est simple et reconnaissable à des tailles plus petites.
  • Suivez les directives spécifiques à la plateforme pour la taille et le schéma de couleurs (par exemple, icônes blanches sur fonds transparents pour les barres d’état Android).
  • Évitez le texte dans l’icône, car il peut devenir illisible à des tailles plus petites.
  • Inclure une icône de notification push bien conçue peut considérablement améliorer l’efficacité et l’attrait de vos notifications.

Icônes de notification web

La taille recommandée est 256x256 pixels. Les types de fichiers PNG, JPG et GIF (non animés) sont pris en charge. Téléchargez votre icône ou utilisez une URL vers une image dans vos Paramètres web du tableau de bord.

Icônes de notifications iOS

Les notifications iOS utilisent la même image que l’icône de votre application et ne peuvent pas être modifiées sans changer l’icône de votre application. iOS prend également en charge les Notifications de communication qui vous permettent de changer l’icône en image de profil de l’utilisateur.

Icônes de notification Android

Android (y compris Amazon et Huawei) fournit plusieurs options pour configurer les icônes, que ce guide détaille en entier. Android prend également en charge les Notifications de conversation qui vous permettent de changer l’icône en image de profil de l’utilisateur. Android prend en charge à la fois les petites et grandes icônes de notification.

Petites icônes de notification

La petite icône est affichée en haut à gauche de la notification. Par défaut, OneSignal affichera une icône de cloche, cependant nous vous recommandons de personnaliser cela pour que les abonnés reconnaissent qu’il s’agit d’une notification de votre application.
La plupart des appareils Android ne prennent en charge que le canal alpha pour l’icône. Elle s’affichera en monochrome dans la barre d’état, mais une couleur d’accentuation peut être appliquée sur le côté gauche de la notification elle-même.

Grandes icônes de notification

La grande icône de notification s’affiche sur le côté droit de la notification. Si vous ne définissez pas de grande icône, la petite icône sera utilisée à la place. OneSignal mettra automatiquement à l’échelle les grandes icônes de notification pour vous afin d’éviter que l’icône ne soit recadrée. La taille recommandée de la grande icône est de 256x256 pixels.

Comment ajouter des icônes Android par défaut

Nous recommandons fortement d’ajouter des icônes par défaut à chaque application Android et Amazon.
1

Générer des icônes

Vous devez ajouter chaque image avec la taille listée et la transparence alpha.Pour obtenir de l’aide pour générer des images avec transparence alpha, consultez ce lien clipart pour des exemples dans Android Asset Studio.
  • Utilisation d'Android asset studio
  • Créer manuellement des icônes
RecommandéPour générer rapidement et facilement de petites icônes avec les paramètres corrects, nous recommandons d’utiliser Android Asset Studio. Utilisez ic_stat_onesignal_default comme nom.

Nom, densité, taille de l’icône par défaut

Requis : Chaque nom et taille en pixels doit être présent dans l’application.
NomDensité (dp)Taille (px)
ic_stat_onesignal_defaultMDPI24x24
ic_stat_onesignal_defaultHDPI36x36
ic_stat_onesignal_defaultXHDPI48x48
ic_stat_onesignal_defaultXXHDPI72x72
ic_stat_onesignal_defaultXXXHDPI96x96
ic_onesignal_large_icon_default.pngXXXHDPI256x256
2

Créer les chemins de projet

Assurez-vous que les chemins suivants existent ; créez tous les dossiers manquants.Requis : Chaque image doit être présente dans les chemins suivants :
  • Android Native
  • Unity
  • Cordova/Ionic
  • React Native
  • .NET Maui
  • Flutter
  • res/drawable-mdpi/ (24x24)
  • res/drawable-hdpi/ (36x36)
  • res/drawable-xhdpi/ (48x48)
  • res/drawable-xxhdpi/ (72x72)
  • res/drawable-xxxhdpi/ (96x96)
  • res/drawable-xxxhdpi/ (256x256) (Grande icône)
Avec les versions de Cordova antérieures à 7.0, vous devrez utiliser <project-root>/platforms/android/res/drawable-{size}/ au lieu du chemin indiqué ci-dessus lors de l’ajout de la ressource d’icône à config.xml
Si vous voyez l’icône de cloche OneSignal par défaut, vous n’avez pas ajouté toutes les tailles d’icône. Veuillez ajouter toutes les tailles d’icône et les chemins corrects.Si vous voyez un carré solide, vous avez défini l’image au bon chemin, mais l’image n’a pas de transparence alpha. Pour plus d’aide, essayez d’utiliser des images de ce clipart Android Asset Studio.
Votre projet devrait ressembler à ceci selon votre SDK :
Vous devriez être prêt avec vos nouvelles icônes par défaut.

Icônes non par défaut

Après avoir ajouté vos icônes par défaut, vous pouvez choisir d’ajouter plus d’icônes non par défaut. Celles-ci vous permettront d’afficher différentes icônes selon les types de notifications que votre application envoie. Par exemple, un jeu avec un titre comme “Jewel Breaker” peut souhaiter avoir une icône de bijou de couleur différente pour chaque notification envoyée qui représente le niveau de l’utilisateur. Pendant ce temps, un réseau social peut souhaiter afficher une icône de bulle de chat lorsque l’utilisateur reçoit un message d’un autre utilisateur pour différencier ces notifications des notifications système plus génériques.OneSignal prend en charge le remplacement des icônes par défaut sur une base par message.
1

Générer des icônes

Suivez les étapes ci-dessus pour générer des icônes et les placer dans le dossier approprié pour votre SDK.
2

Nommer les icônes non par défaut

Pour ajouter des icônes non par défaut, vous devez les nommer autrement que les noms par défaut spécifiés ci-dessus. Par exemple, vous pouvez en nommer une message_icon.
3

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

Si vous avez suivi les étapes ci-dessus pour créer des icônes par défaut et avez mis à jour votre application, vous pourrez référencer ces icônes lorsque vous envoyez une notification. Pour envoyer une notification avec une icône personnalisée :

Tableau de bord

Naviguez vers Messages > Nouveau push > Paramètres de plateforme > Options Google Android > Définissez le nom de l’icône sans l’extension de fichier. Avec les grandes icônes de notification, vous pouvez également fournir une URL d’où l’icône sera affichée.

API REST

Définissez les icônes de notification avec les propriétés API REST small_icon et large_icon. Définissez le nom de l’icône sans l’extension de fichier. Plus de détails dans la documentation de l’API REST Créer une notification.

Couleur d’accentuation de la petite icône

Vous pouvez changer la couleur affichée autour de la petite icône de la notification.

Définir la couleur d’accentuation de la petite icône

Pour définir une couleur par défaut, ajoutez la ligne suivante à votre fichier res/values/strings.xml dans votre projet. Si vous voulez une couleur différente pour le mode sombre, ajoutez également la clé à votre res/values-night/strings.xml. Utilisez la valeur HEX. Utilisez Android Asset Studio schéma de couleurs pour obtenir de l’aide.
<resources>
    <string name="onesignal_notification_accent_color">FF00FF00</string>
</resources>
Pour définir la couleur sur une base par notification, définissez android_accent_color sur notre appel d’API Créer une notification ou entrez une valeur dans le champ Couleur d’accentuation sous Messages > Nouveau push > Paramètres de plateforme > Options Google Android.
Si vous avez très 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. C’est parce qu’il peut falloir de nombreux jours, voire des semaines, pour que la majorité de vos utilisateurs mettent à jour leurs applications vers la dernière version qui contient vos nouvelles icônes.

Images de petites icônes personnalisées sans canal alpha

Certains fabricants d’appareils affichent l’image telle quelle (ignorant essentiellement la règle du canal alpha). Vous pouvez configurer une disposition 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 recommandons fortement de suivre la règle alpha car les icônes peuvent ne pas paraître cohérentes sur tous les appareils. Google l’a conçu de cette façon - l’icône est trop petite pour voir des détails significatifs, donc imposer une seule couleur aide à imposer une icône plus facile à reconnaître d’un coup d’œil.