Skip to main content
PUBLIC.INTERNET
⚡ Acceso Inmediato🔒 Privacidad Primero🆓 Siempre Gratis📱 Funciona en Todos Lados

Favicon Notification Badge Generator

Apps like Gmail and Slack show an unread count right on their browser-tab icon, and that little badge is what pulls you back to the tab. This tool lets you design that badge without writing canvas code. Start from an emoji, 1-2 letters, or by uploading your own favicon (PNG, SVG, or ICO), then add either a numbered count or a simple dot. You control the badge color, the number color, which corner it sits in, and how large it gets, with a contrast ring drawn automatically so it stays legible on busy icons. A live mock of a browser tab shows exactly how it reads at 16px next to true 16px and 32px previews. When it looks right, export a 180px PNG, individual 16/32px PNGs, a real multi-resolution .ico, or a ZIP with everything plus install code. You also get a copy-paste JavaScript snippet that redraws the badge over your favicon at runtime, so the count can update as messages arrive.

Base icon

In a browser tab

Your Site

Preview

32px

16px

Live count snippet (JavaScript)

Paste this into your site to draw the badge over your existing favicon and update it at runtime. Call setFaviconBadge(unreadCount) whenever the count changes.

How to Add a Notification Badge to Your Favicon
  1. Choose a base icon - Switch the Base icon control between Emoji, Letters, or Upload, then set the icon background and shape (rounded, circle, or square) for emoji and letter icons.
  2. Configure the badge - Set Badge to Number or Dot, type the Count, and pick the badge color and number color with the hex inputs or color pickers.
  3. Place and size it - Choose the corner with Position and drag the Badge size slider while the browser-tab mock and the 16px preview update instantly.
  4. Export the files - Use Download 180px PNG, the 32px and 16px buttons, Download .ico, or Download ZIP to get every size plus install code in one archive.
  5. Wire up live counts - Click Copy snippet and paste the JavaScript into your site, then call setFaviconBadge(unreadCount) whenever the number changes.
Why This Tool?
 Most results for favicon badges are JavaScript libraries (Tinycon, favicon-badge) or code tutorials. They assume you want to script everything by hand, which is overkill when you just need the icon files or a snippet tuned to your design. This tool is the visual side of that problem: you set the badge once, see it at the exact 16px size browsers render, and walk away with finished assets. The contrast ring and the true-to-size previews exist because a badge that looks fine at 180px often turns into an unreadable smear at 16px. 
 Everything runs in your browser on the HTML5 Canvas API, so uploaded icons never leave your machine. The .ico export packs 16, 32, and 48px frames into one file using the standard icon container, which is what older browsers and Windows shortcuts still look for. For dynamic counts, the generated snippet draws your exact badge (color, corner, size) over a base favicon and swaps the tab icon with a single function call, bridging the gap between a static generator and a runtime library without pulling in a dependency. 
 The badge math scales proportionally, so a count of 3 and a capped 99+ both stay centered and readable. Pairing this with a clear base icon keeps your tab recognizable while the badge signals that something needs attention.