The design and anatomy of push notifications in 2020
Push notifications have been around for over 10 years. They first appeared in iOS in 2009 and were quickly added to all major mobile operating systems. Then, in 2014, web push notifications came along.
As of today, push notifications are supported in Apple iOS, Google Android, Huawei Android, Amazon Echo, macOS, Windows, Chrome, Safari, Firefox, Edge… The list goes on.
Unfortunately, every platform has its small differences… It can be difficult to figure out exactly what is included in a push notification. how many lines of text need to? how many images? What are character restrictions? How it looks in others operating systemsthat you don t have access to?
In this article, I will try to help you navigate the design of push notifications by analyzing their anatomy. And, if you are a designer, then it will come in handy for you this push notification UI kit for Figma…
Chrome web push notifications for macOS
Upcoming Workshops
-
Browser Icon
Chrome icon. It cannot be changed. -
Heading
Limited to 20-40 characters. -
Domain
The site to which the user is subscribed. It cannot be changed. -
Content
Limited to 20-80 characters. -
Icon
192 × 192 or more. Files in PNG, JPG, GIF formats (not animated).
Please note that the character limit is dependent on the presence of the icon and the characters used. Chrome for MacOS also has support for two action buttons.
Firefox web push notifications for macOS

-
Browser Icon
Firefox icon. It cannot be changed. -
Heading
Limited to 20-40 characters. -
Domain
The site to which the user is subscribed. It cannot be changed. -
Content
Limited to 20-80 characters. -
Icon
192 × 192 or more. Files in PNG, JPG, GIF formats (not animated).
Please note that symbol limits depend on the presence of the icon and symbols used.
Safari web push notifications for macOS

-
Icon
It is installed once and cannot be changed for a single message. It should be 256×256. Files in PNG, JPG, GIF formats (not animated). -
Heading
Limited to 40 characters. -
Content
Limited to 90 characters.
Please note that there is no browser icon in Safari. The domain is also not displayed.
Chrome Web push notifications for Windows

-
Banner image
360 × 180 or 2: 1 aspect ratio. In PNG, JPG, GIF (not animated) formats. -
Icon
192 × 192 or more. Files in PNG, JPG, GIF formats (not animated). -
Browser
Cannot be changed. -
Action buttons
Supports up to 2 action buttons -
Heading
Limited to 60 characters. -
Content
Limited to 120 characters. -
Domain
The site to which the user is subscribed. It cannot be changed.
Windows offers most of the screen space for displaying the banner and icon.
Firefox web push notifications for Windows

-
Heading
Limited to 40 characters. -
Icon
192 × 192 or more. Files in PNG, JPG, GIF formats (not animated). -
Domain
The site to which the user is subscribed. It cannot be changed. -
Content
Limited to 140-190 characters. -
Settings
Cannot be changed.
Chrome Web Push Notifications for Android

-
Badge
72 × 72 or more. Should be white with a transparent background. In PNG format. -
Heading
Limited to 50 characters. -
Body
Limited to 150 characters. -
Large image
1024 × 512 or 2: 1 aspect ratio. In PNG, JPG, GIF (not animated) formats. -
Browser
Can t be changed. -
Domain
The site to which the user is subscribed. It cannot be changed. -
Time stamp
When the message was delivered. -
Icon
192 × 192 or more. PNG, JPG, GIF (not animated).
Mobile push notification, native Android notification

-
Small icon
24×24 – 96×96 to fit devices of all sizes. Should be white with a transparent background. In PNG format. -
Heading
Limited to 50 characters. -
Main text
Limited to 150 characters. -
Large image
1440 × 720 or 2: 1 aspect ratio. In PNG, JPG, GIF format (not animated). -
Action buttons
Supports up to 3 buttons. -
Application Name
Cannot be changed. -
Time stamp
The time the message was delivered. -
Icon
192 × 192 or more. In PNG, JPG, GIF format (not animated).
Native mobile push notification, iOS notification

-
Application Icon
Uses the default application icon and cannot be changed -
Rich Media
1024 × 1024 or 1: 1 aspect ratio. In the formats PNG, JPG, GIF, MP4, MP3, WAV. -
Heading
Limited to 25-50 characters. -
Message
Limited to 150 characters. -
Application Name
Cannot be changed. -
Settings
Cannot be changed. -
Action buttons
Supports up to 4 buttons.
iOS also has subheading support. Please note that unlike Android, iOS does not currently support web push notifications.
Free set of push notifications for Figma
If your project uses push notifications, check out this free Figma design file.

UI kit of push notifications for Figma
Useful resources for push– notifications: