Badging API - Interactive Lab | IconVault
Try navigator.setAppBadge live with a real favicon fallback that draws the badge on the tab icon. Free, runs in your browser.
Badging API
App badge counter with live favicon fallback
navigator.setAppBadge is not available in this browser (it needs Chrome/Edge 81+ or Safari 16.4+). This tool automatically uses a real fallback instead: it draws the badge onto this tab's favicon so you can see the effect live.
Badge controls
Favicon fallback5 of 5 free badge sets left. Everything runs in your browser.
Worth knowing
- The native badge appears on the installed PWA / app icon, not on the tab.
- setAppBadge(0) and clearAppBadge() both clear it.
- Most platforms render counts above 99 as "99+".
- The favicon fallback changes this tab's icon in real time.
Live preview
Current badge
cleared
No badge set yet.
The real code
// Set (resolves even where the OS shows nothing: feature-detect anyway)
if ("setAppBadge" in navigator) {
await navigator.setAppBadge(3); // number shown on the app icon
await navigator.clearAppBadge(); // or setAppBadge(0)
}
// Favicon fallback (works everywhere): draw the count onto the tab icon
const canvas = document.createElement("canvas"); // 64x64
// ... drawImage(favicon) + red dot + count, then:
document.querySelector('link[rel="icon"]').href = canvas.toDataURL();About this tool
IconVault's Badging API playground calls the real `navigator.setAppBadge()` and `clearAppBadge()` so you can experiment with unread counts, plus and minus stepping, and clearing. Where the API is missing, the tool does not fake it: it draws the badge live onto this tab's favicon, giving you a real visual result in any browser. It is free and runs fully in your browser.
Badges are the quiet workhorse of installed web apps: chat apps show unread messages, mail clients show inbox counts, task apps show due items. The lab explains where the native badge actually appears (the installed PWA or app icon, never the tab), the 99+ display convention, and the exact three-line favicon fallback you can ship today for browsers without support.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon