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.

Web Push, Chrome for macOS

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

Firefox push notification for macOS
Firefox push notification for macOS
  1. Browser Icon
    Firefox 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.

Web Push, Safari for macOS

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

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

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

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

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

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

Other Useful Push Resources