Gmail Favicon Counter is a Chrome extension born out of a simple personal need: noticing unread emails more easily.

💡 Inspiration

Normally, Gmail displays the number of unread emails in the tab’s title like (3), but when you have many tabs open or if the Gmail tab is pinned, the title disappears and only the favicon remains. That makes it easy to miss new messages.

So I thought, “Wouldn’t it be really useful if the favicon itself showed the unread count?” That’s where this idea came from.

Since I couldn’t find an extension that perfectly matched what I wanted, I decided to build it myself.

🛠 Implementation

  • Extract the unread count from the tab title using document.title
  • Draw a badge using canvas – red circle with white text
  • Replace <link rel="icon"> to display the updated favicon
  • Use setInterval() to update the count every 3 seconds
  • Supports multiple accounts in separate tabs, each handled individually

🚀 Development Notes

This extension has two main tasks: reading the unread count from Gmail's tab title and turning it into a visual favicon badge.

Initially, I tried using aria-label attributes in the DOM, but Gmail’s DOM structure tends to change frequently and is unstable for scraping. Instead, I settled on using document.title, which is more reliable.

The badge is created using the canvas API and converted into a Base64 PNG via toDataURL(). This image is then inserted as a new <link rel="icon"> tag into the page’s <head>, replacing the original favicon dynamically.

The update happens every 3 seconds via setInterval(), making the badge responsive to new emails. (At this stage, it doesn’t revert to the default Gmail favicon when unread count is zero—but that’s something to consider later.)

I also adjusted font size and vertical alignment to ensure the numbers look properly centered, even with varying digit lengths. Color-wise, I chose Gmail’s signature red #D93025 to stay visually consistent with the platform.

🌟 Release and Review

During the initial Chrome Web Store submission, I mistakenly included an unnecessary scripting permission in the manifest.json. After removing it and resubmitting, the extension passed review and was officially published!

📌 About This Extension

This Chrome extension displays the number of unread Gmail messages as a favicon badge on the tab. It helps users notice new emails even when many tabs are open or the Gmail tab is pinned.

🎀 Final Thoughts

When I create apps or extensions, it usually starts with something I personally need. In other words, I build tools to make my own workflow more comfortable.

That’s exactly what happened with Gmail Favicon Counter — I made it because I felt the lack of it in my day-to-day work. But since I’ve built it, I hope others in the same situation can find it useful too.

Moving forward, I’ll continue to build small, niche tools that make life just a bit easier. If you’re a designer or developer, I’d love it if you check out Dottiq from time to time!