How to Design Push Notifications for Multiple Platforms and Devices in 2022

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 (see our state of notification report).

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.

2023 Updates

With the release of iOS 16.4, web app push notifications have now become available for users through Safari, Google Chrome, and Edge. Web app push notifications effectively function the same way as a traditional push notification, providing updates and alerts for whichever website the notification was created for. These notifications are activated via opt-in only and can appear on lock screens, in the Notification Center, and on Apple Watches.

1. Browser Icon
   The icon that is initially defined in the manifest and cannot be edited for individual messages.
2. Title
   30 Characters (before truncation).
3. Time of Notification
   Displays how old the notification is.
4. App Name
   App name as saved in the Web Application Manifest (non-editable).
5. Message Text
   120-150 characters (before truncation).

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

1. Browser Icon
   Chrome icon. This can’t be changed.
2. Title
   Restricted to 60-80 characters.
3. Domain
   Website user is subscribed to. Can’t be changed.
4. Icon
   192x192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
5. Content
   Restricted to 120-150 characters.
6. 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

1. Browser Icon
   Firefox icon. This can’t be changed.
2. Title
   Restricted to 60-80 characters.
3. Domain
   Website user is subscribed to. Can’t be changed.
4. Icon
   192x192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
5. Content
   Restricted to 120-150 characters.
6. 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

1. Icon
   This is set once and can’t be changed per individual message. Must be 256x256. PNG, JPG, GIF (not animated).
2. Title
   Restricted to 60-80 characters.
3. Content
   Restricted to 120-150 characters.

Web Push, Chrome for Windows 11

1. Banner Image
   360x180 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
2. Browser + Browser Icon
   Can’t be changed.
3. Icon
   192x192 or larger. PNG, JPG, GIF (not animated).
4. Action Buttons
   Supports up to 2 buttons.
5. More Options
   Includes notification settings and focus assist.
6. Dismiss
   Closes the notification.
7. Title
   Restricted to 60 characters.
8. Content
   Restricted to 120 characters.
9. 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

1. Banner Image
   360x180 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
2. Browser + Browser Icon
   Can’t be changed.
3. Icon
   192x192 or larger. PNG, JPG, GIF (not animated).
4. Action Buttons
   Supports up to 2 buttons.
5. More Options
   Includes notification settings and focus assist.
6. Dismiss
   Closes the notification.
7. Title
   Restricted to 60 characters.
8. Content
   Restricted to 120 characters.
9. Domain
   Website user is subscribed to. Can’t be changed.

Web Push, Firefox for Windows 11

1. Browser + Browser Icon
   Can’t be changed.
2. Icon
   192x192 or larger. PNG, JPG, GIF (not animated).
3. More Options
   Includes notification settings and focus assist.
4. Dismiss
   Closes the notification.
5. Title
   Restricted to 60 characters.
6. Content
   Restricted to 120 characters.
7. 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

1. App Icon
   Uses the app's default icon and can’t be changed.
2. Rich Media
   1024x1024 or 1:1 aspect ratio. PNG, JPG, GIF, MP4, MP3, WAV.
3. Title
   Restricted to 25-50 characters.
4. Time Stamp
   When the message was received.
5. Message
   Restricted to 150 characters.
6. 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

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

Mobile Push, Android 12 Native

1. Small Icon
   24x24 - 96x96 to fit all device sizes. Must be white with a transparent background. PNG.
2. Title
   Restricted to 50 characters.
3. Body
   Restricted to 150 characters.
4. Large Picture
   1440x720 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
5. App Name
   Can’t be changed.
6. Time Stamp
   Time message received.
7. Icon
   192x192 or larger. PNG, JPG, GIF (not animated).
8. 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

1. Browser Icon
   Chrome icon. This can’t be changed.
2. Title
   Restricted to 60-80 characters.
3. Domain
   Website user is subscribed to. Can’t be changed.
4. Content
   Restricted to 120-150 characters.
5. Browser
   Can’t be changed.
6. Time Stamp
   When the message was received.
7. Icon
   192x192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
8. 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

1. Browser Icon
   Firefox icon. This can’t be changed.
2. Title
   Restricted to 60-80 characters.
3. Domain
   Website user is subscribed to. Can’t be changed.
4. Content
   Restricted to 120-150 characters.
5. Browser
   Can’t be changed.
6. Time Stamp
   When the message was received.
7. Icon
   192x192 or larger. PNG, JPG, GIF (not animated). Enlarges when expanded.
8. 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

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

Web Push, Chrome for macOS Catalina

1. Browser Icon
   Chrome icon. This can’t be changed.
2. Title
   Restricted to 20-40 characters.
3. Domain
   Website user is subscribed to. Can’t be changed.
4. Content
   Restricted to 20-80 characters.
5. 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

1. Browser Icon
   Firefox icon. This can’t be changed.
2. Title
   Restricted to 60-80 characters.
3. Domain
   Website user is subscribed to. Can’t be changed.
4. Content
   Restricted to 20-80 characters.
5. 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

1. Icon
   This is set once and can’t be changed per individual message. Must be 256x256. PNG, JPG, GIF (not animated).
2. Title
   Restricted to 40 characters.
3. 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

1. Banner Image
   360x180 or 2:1 aspect ratio. PNG, JPG, GIF (not animated).
2. Icon
   192x192 or larger. PNG, JPG, GIF (not animated).
3. Browser
   Can’t be changed.
4. Action Buttons
   Supports up to 2 buttons.
5. Title
   Restricted to 60 characters.
6. Content
   Restricted to 120 characters.
7. 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

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

Web Push, Microsoft Edge for Windows 10

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

Web Push, Chrome for Android 11

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

Mobile Push, Android 11 Native

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

Mobile Push, iOS 14 Native

1. App Icon
   Uses the app's default icon and can’t be changed.
2. Rich Media
   1024x1024 or 1:1 aspect ratio. PNG, JPG, GIF, MP4, MP3, WAV.
3. Title
   Restricted to 25-50 characters.
4. Message
   Restricted to 150 characters.
5. App Name
   Can’t be changed.
6. Options
   Can’t be changed.
7. 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.

Free Push Notification UI Kit for Figma

If you’re a designer working on a project that utilizes push, check out this free Figma design file.

Push Notification Resources and Guides

• Notification preview tool
• Push notification guide
• Rich media guide
• Android notification icon guide
• Web push icons and images guide

Get Started with OneSignal

OneSignal is designed to help you send notifications and seamlessly manage your user communication across a variety of channels, including mobile push notifications, web push notifications, bulk SMS, in-app messaging, and email. Our platform is quick to set up and makes it easy to send eye-catching messages without doing any development work. If you don't have a OneSignal account, you can create one for free and start sending push notifications to your users today. Don't take our word for it — simply sign up and see for yourself!