Web Push Icons & Images

Customizing Web Push notifications with your app icons, colors, and style.

Setting the Icon, Image, and Badge

You can add the default web icon in the Web Push Setup configuration.

The images can be set when:

Icon Requirements

All browsers support icons.
Safari will only use the default icon.

OptionDetails
ColorRGB
ResolutionRecommended: 256x256 or larger
Filetype

jpg, png, gif, webp, ico, cur, bmp


Not supported: svg or animated gifs (will show first gif frame only)

Image Requirements

Custom large images only supported on Windows and Android. macOS doesn't support large images since Chrome 59 and only expands the large icon. See Chrome Developer Docs imageUrl for details. macOS expands the chrome_web_icon.

OptionChrome
ResolutionRecommendations: 4:3 aspect ratio landscape

Min Width: 1350 pixels
Filetype

jpg, png, gif, webp, ico, cur, bmp


Not supported: svg or animated gifs (will show first gif frame only)

OneSignal API Parameterchrome_web_image

🚧

Media Upload Limitations

OneSignal only stores images uploaded to our servers for 33 days from the time it was uploaded.

If you duplicate or use a draft message with an image uploaded longer than 33 days, you will need to re-upload the image.

If you need the image for longer, you can use templates or store the image on your own servers and reference the resource URL directly.

πŸ“˜

Image Issues?

For troubleshooting, see Notification Images Not Showing.

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.

Resolution72x72 or larger
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.


What’s Next

Learn about setting up more features, or start using the OneSignal Dashboard