Definition

badge (Notification option)

Short definition

badge is a field passed to showNotification(title, { badge: "/badge-72.png", ... }) that supplies a small, typically monochrome PNG icon (recommended around 72x72 or 96x96) shown in the Android status bar and shade, as distinct from the larger icon field used for the main notification image.

Reviewed August 3, 2026

Android renders the badge image as a silhouette mask, so it should be a simple white-on-transparent glyph — a full-colour photo or logo will typically be flattened and look wrong once masked.

This is only used on Android; other platforms either ignore the field entirely or reuse the main icon in its place, so testing solely on desktop Chrome will not reveal badge rendering problems.

badge is unrelated to the separate, experimental Badging API (navigator.setAppBadge()) that puts a numeric count on the app icon itself — the two share a name but serve different purposes and have different browser support.

The full Notification options list, including badge, is documented at https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification#options.

Related terms

actions (Notification option)

actions is an array option passed to showNotification(), e.g. { actions: [{ action: "reply", title: "Reply" }, { action: "dismiss", title: "Dismiss" }] }, that renders extra buttons on the notification itself. The service worker's notificationclick handler reads event.action to see which button, if any, the user pressed.

tag (Notification option)

tag is a string option, e.g. showNotification("New message", { tag: "chat-thread-42" }), used to identify a class of related notifications. When a new notification arrives with a tag matching one already showing, the browser replaces it in place by default rather than adding a second, separate notification to the shade.

push event (service worker)

The push event fires on the service worker whenever a message arrives from the push service the browser is subscribed to. A handler typically reads event.data.json() for the payload and calls event.waitUntil(self.registration.showNotification(title, options)) so the browser keeps the worker alive until the notification is actually displayed.

renotify (Notification option)

renotify is a boolean option, e.g. { tag: "order-42", renotify: true }, that only has an effect when combined with tag. Without renotify, a new notification that replaces an existing same-tag notification updates silently with no new sound or vibration; with renotify: true, the replacement alerts the user exactly as a brand-new notification would.

silent (Notification option)

silent is a boolean Notification option, e.g. showNotification("Synced", { silent: true }), that suppresses the sound, vibration and screen-wake behaviour a notification would normally trigger, while still adding it to the notification shade for the user to see whenever they next check.

requireInteraction (Notification option)

requireInteraction is a boolean option, e.g. showNotification("Incoming call", { requireInteraction: true }), that prevents the browser from automatically dismissing the notification after its default timeout (a few seconds on most desktop platforms). The notification instead stays visible until the user clicks it, clicks an action, or closes it manually.