Web Push: Icons & Images

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

Web push notifications support icons and images on the following browsers:

Browser

Icons

Images

Chrome

Yes on PC, macOS, and Android.
chrome_web_icon

Yes
chrome_web_image supported on PC and Android.

macOS expands the chrome_web_icon as the big image.

Firefox

Yes on PC, macOS and Android.
firefox_icon

Firefox does not support big images.

Safari

Yes, on macOS only.
iOS (iPhones and iPads) do not support web push yet.

Uses the default icon. Cannot be customized.

Safari does not support big images.

Edge

Yes on PC, macOS and Android.

Uses the default icon. Cannot be customized.

Edge does not support big images.

Setting the Icon, Image, and Badge

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

23482348

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

11631163

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. Only Chrome and Firefox support custom icon images. Safari only allows the default icon set in your OneSignal Dashboard.

In this example, it is the OneSignal logo:

585585 764764

Icon Requirements

Option

Details

Color

RGB colors

Resolution

Recommended: 256x256 or larger

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
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)

OneSignal API Parameter

chrome_web_image

πŸ“˜

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

72x72 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

Did this page help you?