The State of Push Notification Design in 2021

6 min readJan 11, 2021

Push notifications have been around for over 10 years. First introduced in 2009 for iOS, they quickly rolled out across all the major mobile operating systems. Then in 2014 web push came along.

As of today, push notifications are supported across Apple iOS, Google Android, Huawei Android, Amazon Echo, macOS, Windows, Chrome, Safari, Firefox, Edge… the list goes on.

Unfortunately each platform is a little bit different. It can be daunting and complicated to get your head around what exactly goes into a push notification. How many lines of text do you need? How many images? What are the character restrictions? What does it look like on the other operating systems you don’t have access to?

Here I’ll share some insights to help you navigate the design of a notification by dissecting the anatomy. And if you’re a designer you’ll find this Figma push notification UI kit useful.

p.s. we’re hiring Designers at OneSignal to work on our messaging platform

Web Push, Chrome for macOS Big Sur

Browser Icon
Chrome icon. This can’t be changed.
Title
Restricted to 60–80 characters.
Domain
Website user is subscribed to. Can’t be changed.
Content
Restricted to 120–150 characters.
Browser
Can’t be changed.
Time Stamp
When the message was received.
Icon
192x192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
Action Buttons
Supports up to 2 buttons.

Note that character restrictions vary depending on if an icon is present and the characters used. The main differences between macOS Big Sur and its predecessors is that messages can be expanded with a larger icon and the browser icon is smaller, allowing more room for content.

Web Push, Firefox for macOS Big Sur

Browser Icon
Firefox icon. This can’t be changed.
Title
Restricted to 60–80 characters.
Domain
Website user is subscribed to. Can’t be changed.
Content
Restricted to 120–150 characters.
Browser
Can’t be changed.
Time Stamp
When the message was received.
Icon
192x192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
Action Buttons
These cannot be customized for Firefox.

Web Push, Safari for macOS Big Sur

Icon
This is set once and can’t be changed per individual message. Must be 256x256. PNG, JPG, GIF (not animated).
Title
Restricted to 60–80 characters.
Content
Restricted to 120–150 characters.
Website Name
Can’t be changed.
Time Stamp
When the message was received.

Web Push, Chrome for macOS Catalina

Browser Icon
Chrome icon. This can’t be changed.
Title
Restricted to 20–40 characters.
Domain
Website user is subscribed to. Can’t be changed.
Content
Restricted to 20–80 characters.
Icon
192x192 or larger. PNG, JPG, GIF (not animated).

Note that character restrictions vary depending on if an icon is present and the characters used. Chrome for macOS also has support for 2 action buttons.

Web Push, Firefox for macOS Catalina

Browser Icon
Firefox icon. This can’t be changed.
Title
Restricted to 60–80 characters.
Domain
Website user is subscribed to. Can’t be changed.
Content
Restricted to 20–80 characters.
Icon
192x192 or larger. PNG, JPG, GIF (not animated).

Note that character restrictions vary depending on if an icon is present and the characters used.

Web Push, Safari for macOS Catalina

Icon
This is set once and can’t be changed per individual message. Must be 256x256. PNG, JPG, GIF (not animated).
Title
Restricted to 40 characters.
Content
Restricted to 90 characters.

Notice how Safari doesn’t have a browser icon. Nor does it display the domain.

Web Push, Chrome for Windows 10

Banner Image
360x180 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
Icon
192x192 or larger. PNG, JPG, GIF (not animated).
Browser
Can’t be changed.
Action Buttons
Supports up to 2 buttons.
Title
Restricted to 60 characters.
Content
Restricted to 120 characters.
Domain
Website user is subscribed to. Can’t be changed.

Windows offers the most screen real estate for imagery, with both the banner image and icon on display.

Web Push, Firefox for Windows 10

Title
Restricted to 40 characters.
Icon
192x192 or larger. PNG, JPG, GIF (not animated).
Domain
Website user is subscribed to. Can’t be changed.
Content
Restricted to 140–190 characters.
Settings
Can’t be changed.

Web Push, Microsoft Edge for Windows 10

Title
Restricted to 40 characters.
Icon
192x192 or larger. PNG, JPG, GIF (not animated).
Browser
Can’t be changed.
Content
Restricted to 140–190 characters.
Domain
Website user is subscribed to. Can’t be changed.

Web Push, Chrome for Android 11

Badge
72x72 or larger. Must be white with a transparent background. PNG.
Title
Restricted to 50 characters.
Body
Restricted to 150 characters.
Large Picture
1024x512 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
Browser
Can’t be changed.
Domain
Website user is subscribed to. Can’t be changed.
Time Stamp
When the message was received.
Icon
192x192 or larger. PNG, JPG, GIF (not animated).

Mobile Push, Android 11 Native

Small Icon
24x24–96x96 to fit all device sizes. Must be white with a transparent background. PNG.
Title
Restricted to 50 characters.
Body
Restricted to 150 characters.
Large Picture
1440x720 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
Action Buttons
Supports up to 3 buttons.
App Name
Can’t be changed.
Time Stamp
Time message received.
Icon
192x192 or larger. PNG, JPG, GIF (not animated).