Web push notifications support icon, image, and badge customization options.
On the dashboard, the icon, image, and badge can be set here:
Sending from API, use
As of with Chrome 59, big pictures are no longer supported on MacOS. Badges are only supported on Chrome on Android 53+.
The icon displays to the side of the notification's title and message. In this example, it is the OneSignal logo:
192x192 or larger
Chrome (on Windows Desktop and Android) supports displaying a large image below the notification's title and message:
Keep in mind:
On Chrome (Windows only):
- Chrome 68+ : The image should be at least 360x180 or have a 2:1 aspect ratio.
- Chrome 67 and lower: The image should be at least 360x240, with a 1.5 aspect ratio. We recommend 720x480 to make images look best for users with HiDPI (retina) displays.
- Smaller images will be upscaled to fit the container while preserving the aspect ratio; larger images will be downscaled
- The image is displayed using 'contain' sizing: each side of the image is as large as possible while not exceeding the the container side's length
On Chrome on Android:
- The image is displayed using 'cover' sizing: the image covers the container entirely, even it means cropping the top/bottom or sides of the images
- If the notification tray has too many notifications, the image will not be displayed by default, and the user must "scroll down" on the notification to see it. Examples are below.
- Use a 2:1 aspect ratio. Android not have a size limit, but we recommend:
- Minimum - 512x256
- Balanced - 1024x512
- Maximum - 2048x1024
Platform size example are below.
Note: we recommend 720x480 to make images look best for users with HiDPI (retina) displays.
Because of 'cover' sizing, a 500x500 image fills up the viewport:
Comparing the difference between the 'contain' and 'cover' sizing in Desktop vs. Android using the same image:
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:
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:
Alpha channel only
Not supported: RGB channels. Badges use alpha channels because they must appear on both light and dark backgrounds.
72x72 or larger
Must use an HTTPS URL
Here's an example badge icon of our OneSignal logo that uses only the alpha channel.