PusharooRich push notifications: images, icons and buttons
A “rich” notification adds a picture, a recognisable icon or tap-able buttons to the basic title and text. Support varies a lot by browser — here’s what actually shows where.
- Icons show almost everywhere; use a square 192×192 px (or larger) PNG of your logo.
- Large images show in Chrome and Edge on Windows, Android and ChromeOS — not in Safari or Firefox.
- Action buttons (up to two in Chrome) work in Chromium browsers only; always make the main tap useful too.
- Design for the plainest case first: a great title still works when nothing else shows.
The parts of a rich notification
| Element | What it is | Recommended |
|---|---|---|
| Icon | Your logo, shown beside the text | Square PNG, 192×192 px or larger |
| Image | Large picture below the text | 2:1 landscape, e.g. 1024×512 px, under ~1 MB |
| Badge | Small monochrome glyph in the Android status bar | 96×96 px, white on transparent |
| Actions | Buttons such as “Shop now” / “Later” | Up to 2, 1–2 words each |
| Tag / renotify | Replace an older notification instead of stacking | Same tag for updates to one story |
What shows where
| Icon | Large image | Action buttons | |
|---|---|---|---|
| Chrome / Edge — Windows | Yes | Yes | Yes (2) |
| Chrome / Edge — Android | Yes | Yes, when expanded | Yes |
| Chrome — macOS | Yes | Not shown in banners | Limited (macOS style) |
| Firefox — all | Yes | No | No |
| Safari — macOS | Site icon | No | No |
| iPhone/iPad Home Screen app | App icon | No | No |
Browsers change their notification UI over time and operating systems add their own rules, so treat this as a practical guide and test on your own devices. Check Notification.maxActions in a browser’s console to see how many buttons it supports.
Choosing images that work
- Put the subject in the centre — Android and Windows crop differently.
- Avoid text in the image; it’s unreadable at notification size and duplicates your title.
- Use HTTPS URLs on a fast host; a slow image can delay or drop the visual.
- Remember that most iPhone, Mac and Firefox users will never see it.
Action buttons: helpful or noise?
Buttons are worth it when they offer genuinely different outcomes: “Track order” vs. “Contact support”, or “Read” vs. “Save for later”. Two buttons that go to the same page just add clutter. Because Safari and Firefox ignore them, the main notification tap must always lead somewhere useful on its own.
// Inside a service worker, a rich notification looks like this
self.registration.showNotification('New collection is live', {
body: '12 summer styles, free shipping this week.',
icon: '/icon-192.png',
image: '/img/summer-1024x512.jpg',
badge: '/badge-96.png',
actions: [{ action: 'shop', title: 'Shop now' }, { action: 'later', title: 'Later' }],
data: { url: '/collections/summer' }
});More service worker detail is in service worker push events.
Icon and badge sizes
| Asset | Recommended | Where it shows |
|---|---|---|
| Icon | 192×192 px PNG, square, simple | Every platform; next to the title |
| Badge (Android) | 96×96 px, monochrome with transparency | Android status bar |
| Large image | 1024×512 px (2:1), under ~1 MB | Chrome/Edge on Windows, Android |
| Home Screen icon (iPhone) | 180–192 px apple-touch-icon | Notification icon for iOS web apps |
Accessible rich notifications
- Never put essential text only in the image — screen readers and many platforms won’t show it.
- Make button labels verbs that make sense alone (“Track order”, not “Click here”).
- Avoid emoji-only titles; screen readers read emoji names aloud.
- Keep contrast high in images for small screens and dark mode.
Rich notifications in Pusharoo
Every Pusharoo campaign can carry a title, text, link, large image and up to two action buttons with their own links, and every notification uses your site’s icon — never ours. Button clicks are counted separately in the stats. Images appear on the platforms that support them and are simply skipped elsewhere, so you can compose once. See creating campaigns.
Questions
What size should a push notification image be?
A 2:1 landscape image such as 1024×512 px works well on Chrome and Edge. Keep the subject centred and avoid text in the image.
Why doesn’t my image show on Mac?
macOS notification banners don’t display large web push images in most browsers, and Safari never shows them. The title, body and icon still appear.
Do GIFs animate in push notifications?
No. Browsers display the first frame at most. Use a still image.
What image size is best for rich push?
A 2:1 landscape image around 720×360 to 1440×720 px works broadly; keep text out of the edges because platforms crop differently.
Do rich notifications reduce delivery?
No, delivery is the same. The image just isn’t displayed on some platforms, so the copy must stand alone.
Keep reading
Push notification character limits, in practice
Practical title and body lengths per platform, why they differ, and a safe length that works everywhere.
30 web push notification examples (and why they work)
Thirty original examples for stores, publishers, SaaS, local businesses, events and non-profits — with reasoning.
Browser push notifications: who supports what
Support table for Chrome, Edge, Firefox, Safari, Opera and Samsung Internet — desktop, Android and iPhone.
White-label push notifications: your brand, not ours
Your name, icon and words on every prompt and notification. No “Powered by” badge.
More in Features: Push notification segmentation that actually helps · Writing and scheduling push campaigns · Push automations: welcome series and follow-ups · All guides
Free for life. No limits.
Unlimited subscribers, campaigns and automations. No badges. About five minutes to install.