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:
- Sending Push Messages from the dashboard.
- Sending from API, use
chrome_web_icon,chrome_web_image, andchrome_web_badgeparameters
Icon Requirements
All browsers support icons.
Safari will only use the default icon.
| Option | Details |
|---|---|
| Color | RGB |
| Resolution | Recommended: 256x256 or larger |
| Filetype |
Not supported: |
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.
| Option | Chrome |
|---|---|
| Resolution | Recommendations: 4:3 aspect ratio landscape Min Width: 1350 pixels |
| Filetype |
Not supported: |
| OneSignal API Parameter | chrome_web_image |
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 |
Not supported: RGB channels. Badges use alpha channels because they must appear on both light and dark backgrounds. |
| Resolution | 72x72 or larger |
| Filetype |
Not supported: Must use an HTTPS URL |
Here's an example badge icon of our OneSignal logo that uses only the alpha channel.
Updated over 1 year ago
Learn about setting up more features, or start using the OneSignal Dashboard