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

Lee Munroe -

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

Chrome push notification 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

Firefox push notification 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

Safari push notification 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

Chrome push notification 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

Microsoft Edge push notification 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

Firefox push notification 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

Native push notification for iOS 15
  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

Chrome web push notification 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

Native push notification for Android 12
  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

Chrome push notification 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

Firefox push notification 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

Safari push notification 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

Chrome push notification 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

Firefox push notification for macOS
  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

Safari push notification for macOS
  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

Chrome push notification for Windows
  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

Firefox push notification for Windows
  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

Edge push notification for Windows
  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

Chrome push notification for Android
  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

Native push notification for Android
  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

Native push notification for iOS
  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 UI kit for Figma

Push Notification Resources and Guides

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!

Create a Free Account