Web push notifications support icon, image, and badge customization options.

Setting the Icon, Image, and Badge

You can add the default web icon in step 2 of the Web Push Setup configuration in the Dashboard.

When Sending Push Messages, you can set the icon, image, and badge here:

Sending from API, use chrome_web_icon, chrome_web_image, and chrome_web_badge parameters

Icon

The icon displays to the side of the notification's title and message. In this example, it is the OneSignal logo:

Icon Requirements

Image

Chrome on Windows Desktop and Android supports displaying a large image below the notification's title and message.

• Chrome removed image support for MacOS in Chrome 59.

• Chrome 67 and lower: The image should be at least 360x240, with a 1.5 aspect ratio. More details on older versions of Chrome here.

Sliding Image on Android (too many notifications in tray)

When there are too many notifications in the tray, your image may not be shown at first. The notification has to be "scrolled down" to see the image:

Badge

Chrome on Android

For Chrome 53+ on Android 6.0+, the badge replaces the Chrome browser icon that appears on the notification tray and above the title. In this example, a custom badge for the app replaces the Chrome browser icon:

Badge Requirements

Here's an example badge icon of our OneSignal logo that uses only the alpha channel.