OneSignal Help & Documentation

Welcome to the OneSignal New IA developer hub. You'll find comprehensive guides and documentation to help you start working with OneSignal New IA as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Discussions

Web Push Notification Icons

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

On the dashboard, the icon, image, and badge can be set 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

Color

RGB colors



Resolution

192x192 or larger



Filetype

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


Not supported: svg or gif animations.


Image

Chrome on Windows Desktop and Android supports displaying a large image below the notification's title and message. Image support for MacOS was removed in Chrome 59.

Chrome (Windows only)

Chrome on Android




Resolution

2:1 aspect ratio


Recommended: 360x180

2:1 aspect ratio


- Minimum - 512x256
- Balanced - 1024x512
- Maximum - 2048x1024




Filetype

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


Not supported: svg or gif animations.

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


Not supported: svg or gif animations.

  • Chrome 67 and lower: The image should be at least 360x240, with a 1.5 aspect ratio. More details on older versions of Chrome here.

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 gif animations.


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

Features Setup
Dashboard

Web Push Notification Icons


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

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.