Web Push Notification Icons & Images

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

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 and step 5 of the Safari Web Push Setup in the Dashboard.

2348

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

1163

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:

585 764

Icon Requirements

OptionDetails
ColorRGB colors
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

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.
648
Chrome on AndroidChrome on Windows
ResolutionRecommendations: 2:1 aspect ratio landscape

Max Width: 2000 pixels
Min Width: 300 pixels

Common sizes:
512x256px
1440x720px
Recommendations: 2:1 aspect ratio landscape

Max Width: 2000 pixels
Min Width: 300 pixels

Common sizes:
512x256px
1440x720px
Filetype

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


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

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


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

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.

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