Web push notifications support icon, image, and badge customization options.
Setting the Icon, Image, and Badge
You can add the default web icon in the Web Push Setup configuration.
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
Option | Details |
|---|---|
Color |
|
Resolution | Recommended: |
Filetype | `jpg`, `png`, `gif`, `webp`, `ico`, `cur`, `bmp` Not supported: `svg` or animated gifs (will show first gif frame only) |
Image
Only Chrome supports displaying a large image below the notification's title and message. Chrome on macOS requires the Big Sur update or higher to support images.
Chrome | |
|---|---|
Resolution | Recommendations: 2:1 aspect ratio landscape Max Width: 2000 pixels Common sizes: |
Filetype | `jpg`, `png`, `gif`, `webp`, `ico`, `cur`, `bmp` Not supported: `svg` or animated gifs (will show first gif frame only) |
OneSignal API Parameter |
Image Issues?
For troubleshooting, see Notification Images Not Showing.
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
Color | `Alpha` channel only Not supported: RGB channels. Badges use alpha channels because they must appear on both light and dark backgrounds. |
|---|---|
Resolution |
|
Filetype | `png`, `gif`, `webp`, `ico`, `cur`, `bmp` Not supported: `svg` or animated gifs (will show first gif frame only) Must use an HTTPS URL |
Here's an example badge icon of our OneSignal logo that uses only the alpha channel.
Updated 2 months ago
What's Next
Learn about setting up more features, or start using the OneSignal Dashboard
| Features Setup |
| Dashboard |