Icon requirements for web push notifications vary by browser and by how the icon is used.
General requirements
- Publicly accessible: the image must be reachable at a direct public URL.
- HTTPS: icons must be served over HTTPS — service workers, which deliver web push, require secure origins.
- Reliable hosting: host icons on a CDN or similar so they load quickly for large sends.
Safari
- On the legacy Safari Configuration (macOS 10.14-12, certificate-based setup), Safari requires a website icon of 256x256 pixels; Pushwoosh bundles it into the push package and resizes it automatically for the other UI elements.
- On modern Safari (macOS Ventura 13 and later, set up through the standard All browsers/VAPID configuration), there is no separate push package — Safari uses a regular web push icon the same way Chrome and Firefox do.
Chrome badge icon (mobile)
- Dimensions: 72x72 pixels.
- Format: monochrome (single colour) transparent
.png. - Served over HTTPS.
About the browser logo on desktop
On desktop, Chrome decides whether to show your website icon or its own browser logo, and this varies between Chrome versions and operating systems (it is especially common on Windows) — it cannot be forced from the push payload. The exception: if your site is installed as a Progressive Web App (PWA) and the icon is properly declared in the web app manifest, your custom icon is used. See Why does the Chrome browser logo appear instead of my custom icon on Windows web push notifications?
Comments
0 comments
Please sign in to leave a comment.