How does GMAIL have a favicon that shows an unread message count? [duplicate]

Question

GMAIL in chrome has a favicon that shows an unread message count. Does anyone know how they do that? Is that them changing images? Or is there a property that allows you to set the number near the favicon?

Thanks

Answer 1

I am not 100% certain on how Google accomplishes this however, someone created a UserScript to mimic the functionality. You can view the source code of this script and see how they accomplished it.

http://userscripts.org/scripts/review/39432

EDIT

I'm including this resource since userscripts is no longer around:

http://lab.ejci.net/favico.js/

on github

https://github.com/ejci/favico.js

Answer 2

They use different images for counter icons, They have one default favicon and use javascript to update as new email arrives.

e.g.

1. https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/0.png
2. https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/1.png
3. https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/2.png

4. https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/3.png

   

https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/n.png

Answer 3

There's no property that sets a number next to the favicon, but you can change it in javascript. Check out this question Changing website favicon dynamically