How to Design Push Notifications for Different Platforms and Devices in 2022
Push notifications have been around for over a decade. They were first introduced in 2009 for Apple’s mobile operating system iOS, and they were instantly embraced by almost all marketers, brands and professionals in business.
Today, mobile and web push notifications are supported on almost all mobile and web apps, browsers, and platforms including Apple iOS, Google Android, Huawei Android, Amazon Echo, macOS, Windows, Chrome, Safari, Firefox, Edge and more.
However, each platform has different requirements in terms of showing and optimizing push notifications. These include texts, images, headings and how all these elements you designed are shown on those platforms.
Before it gets too complicated for you we have gathered everything you need to know when it comes to designing your push notifications according to the needs of every platform.
Latest Operating Systems 2022
We’ll start with the latest versions of these operating systems (macOS Monterey, Windows 11, iOS 15, Android 12), and then look at some previous versions for historical reference.
Web Push, Chrome for macOS Monterey
a. Browser Icon
Chrome icon. This can’t be changed.
b. Title
Restricted to 60-80 characters.
c. Domain
Website user is subscribed to. Can’t be changed.
d. Icon
192×192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
e. Content
Restricted to 120-150 characters.
f. Action Buttons
Supports up to 2 buttons.
Note that character restrictions vary depending on if an icon is present and the characters used.
Web Push, Firefox for macOS Monterey
a. Browser Icon
Firefox icon. This can’t be changed.
b. Title
Restricted to 60-80 characters.
c. Domain
Website user is subscribed to. Can’t be changed.
d. Icon
192×192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
e. Content
Restricted to 120-150 characters.
f. Action Buttons
Supports up to 2 buttons.
Note that character restrictions vary depending on if an icon is present and the characters used.
Web Push, Safari for macOS Monterey
a. Icon
This is set once and can’t be changed per individual message. Must be 256×256. PNG, JPG, GIF (not animated).
b. Title
Restricted to 60-80 characters.
c. Content
Restricted to 120-150 characters.
Web Push, Chrome for Windows 11
a. Banner Image
360×180 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
b. Browser + Browser Icon
Can’t be changed.
c. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
d. Action Buttons
Supports up to 2 buttons.
e. More Options
Includes notification settings and focus assist.
f. Dismiss
Closes the notification.
g. Title
Restricted to 60 characters.
h. Content
Restricted to 120 characters.
i. 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, Microsoft Edge for Windows 11
a. Banner Image
360×180 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
b. Browser + Browser Icon
Can’t be changed.
c. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
d. Action Buttons
Supports up to 2 buttons.
e. More Options
Includes notification settings and focus assist.
f. Dismiss
Closes the notification.
g. Title
Restricted to 60 characters.
h. Content
Restricted to 120 characters.
i. Domain
Website user is subscribed to. Can’t be changed.
Web Push, Firefox for Windows 11
a. Browser + Browser Icon
Can’t be changed.
b. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
c. More Options
Includes notification settings and focus assist.
d. Dismiss
Closes the notification.
e. Title
Restricted to 60 characters.
f. Content
Restricted to 120 characters.
g. Domain
Website user is subscribed to. Can’t be changed.
Note that Firefox on Windows 11 does not have a banner image or action buttons like Chrome and Edge.
Mobile Push, iOS 15 Native
a. App Icon
Uses the app’s default icon and can’t be changed.
b. Rich Media
1024×1024 or 1:1 aspect ratio. PNG, JPG, GIF, MP4, MP3, WAV.
c. Title
Restricted to 25-50 characters.
d. Time Stamp
When the message was received.
e. Message
Restricted to 150 characters.
f. Action Buttons
Supports up to 4 buttons.
iOS also has support for a subtitle. Note that unlike Android, iOS currently has no support for web push, but we suspect iOS web push support may be coming soon.
Web Push, Chrome for Android 12
a. Badge
72×72 or larger. Must be white with a transparent background. PNG.
b. Title
Restricted to 50 characters.
c. Body
Restricted to 150 characters.
d. Large Picture
1024×512 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
e. Browser
Can’t be changed.
f. Domain
Website user is subscribed to. Can’t be changed.
g. Time Stamp
When the message was received.
h. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
i. Action Buttons
Supports up to 2 buttons.
Mobile Push, Android 12 Native
a. Small Icon
24×24 – 96×96 to fit all device sizes. Must be white with a transparent background. PNG.
b. Title
Restricted to 50 characters.
c. Body
Restricted to 150 characters.
d. Large Picture
1440×720 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
e. App Name
Can’t be changed.
f. Time Stamp
Time message received.
g. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
h. Action Buttons
Supports up to 3 buttons.
Older Operating Systems
Now we’ll look at previous versions of these operating systems (macOS Big Sur, iOS 14, Android 11) for reference.
Web Push, Chrome for macOS Big Sur
a. Browser Icon
Chrome icon. This can’t be changed.
b. Title
Restricted to 60-80 characters.
c. Domain
Website user is subscribed to. Can’t be changed.
d. Content
Restricted to 120-150 characters.
e. Browser
Can’t be changed.
f. Time Stamp
When the message was received.
g. Icon
192×192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
h. 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
a. Browser Icon
Firefox icon. This can’t be changed.
b. Title
Restricted to 60-80 characters.
c. Domain
Website user is subscribed to. Can’t be changed.
d. Content
Restricted to 120-150 characters.
e. Browser
Can’t be changed.
f. Time Stamp
When the message was received.
g. Icon
192×192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
h. Action Buttons
These cannot be customized for Firefox.
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, Safari for macOS Big Sur
a. Icon
This is set once and can’t be changed per individual message. Must be 256×256. PNG, JPG, GIF (not animated).
b. Title
Restricted to 60-80 characters.
c. Content
Restricted to 120-150 characters.
d. Website Name
Can’t be changed.
e. Time Stamp
When the message was received.
Web Push, Chrome for macOS Catalina
a. Browser Icon
Chrome icon. This can’t be changed.
b. Title
Restricted to 20-40 characters.
c. Domain
Website user is subscribed to. Can’t be changed.
d. Content
Restricted to 20-80 characters.
e. Icon
192×192 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
a. Browser Icon
Firefox icon. This can’t be changed.
b. Title
Restricted to 60-80 characters.
c. Domain
Website user is subscribed to. Can’t be changed.
d. Content
Restricted to 20-80 characters.
e. Icon
192×192 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
a. Icon
This is set once and can’t be changed per individual message. Must be 256×256. PNG, JPG, GIF (not animated).
b. Title
Restricted to 40 characters.
c. 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
a. Banner Image
360×180 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
b. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
c. Browser
Can’t be changed.
d. Action Buttons
Supports up to 2 buttons.
e. Title
Restricted to 60 characters.
f. Content
Restricted to 120 characters.
g. 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
a. Title
Restricted to 40 characters.
b. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
c. Domain
Website user is subscribed to. Can’t be changed.
d. Content
Restricted to 140-190 characters.
e. Settings
Can’t be changed.
Web Push, Microsoft Edge for Windows 10
a. Title
Restricted to 40 characters.
b. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
c. Browser
Can’t be changed.
d. Content
Restricted to 140-190 characters.
e. Domain
Website user is subscribed to. Can’t be changed.
Web Push, Chrome for Android 11
a. Badge
72×72 or larger. Must be white with a transparent background. PNG.
b. Title
Restricted to 50 characters.
c. Body
Restricted to 150 characters.
d. Large Picture
1024×512 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
e. Browser
Can’t be changed.
f. Domain
Website user is subscribed to. Can’t be changed.
g. Time Stamp
When the message was received.
h. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
Mobile Push, Android 11 Native
a. Small Icon
24×24 – 96×96 to fit all device sizes. Must be white with a transparent background. PNG.
b. Title
Restricted to 50 characters.
c. Body
Restricted to 150 characters.
d. Large Picture
1440×720 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
e. Action Buttons
Supports up to 3 buttons.
f. App Name
Can’t be changed.
g. Time Stamp
Time message received.
h. Icon
192×192 or larger. PNG, JPG, GIF (not animated).
Mobile Push, iOS 14 Native
a. App Icon
Uses the app’s default icon and can’t be changed.
b. Rich Media
1024×1024 or 1:1 aspect ratio. PNG, JPG, GIF, MP4, MP3, WAV.
c. Title
Restricted to 25-50 characters.
d. Message
Restricted to 150 characters.
e. App Name
Can’t be changed.
f. Options
Can’t be changed.
g. Action Buttons
Supports up to 4 buttons.
iOS also has support for a subtitle. Note that unlike Android, iOS currently has no support for web push.
Click the link below to schedule time with our Head of Product to discuss how we can help bring your ideal use case to life.
