Articles › Notification Appearance, Web Push Notifications

Web Notifications: difference between icon / image / badge

  • # web-notifications

What is the difference between Notification.icon, Notification.image and Notification.badge?

Icon and image are made for two different purposes: the icon usually represents the sender (website or person), while the image represents the main content of the notification (e.g. the cover image of the post of the notification). Finally the badge is a very small icon that is usually displayed in the notification bar or near the domain name (it should represent your app logo or the type of notification, like a heart for a like).

You can clearly see the difference between icon, image and badge in this figure:

Web notification with icon, badge, image and button icon.

The icon is supported by all browsers / OS and always displayed. The image and the badge are supported only by some browsers and sometimes they are not displayed, also depending on conditions like the space available and design choices.

For Pushpad notifications containing images and icons, you can find more information in the documentation.