How does GMAIL have an icon that shows an unread number of messages?

Question

GMAIL in chrome has an icon that shows an unread number of messages. Does anyone know how they do this? Is it that they change images? Or is there a property that allows you to set the number next to the icon?

thanks

Answer 1

They use different images for counter icons. They have one favicon icon and use javascript to update as a new message arrives.

eg.

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

• 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 2

I'm not 100% sure how Google does this, however someone created UserScript to mimic the functionality. You can view the source code of this script and see how they executed it.

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

EDIT

I enable this resource because it no longer works with usercripts:

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

on github

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

Answer 3

There is no property that sets the number next to the icon, but you can change it in javascript. Check this question. Dynamically changing site icon.

Answer 4

I don’t know how Google did it, but the way I did it:

$('body').append($('<link rel="icon" type="image/ico" href="http://localhost/myfavicon.ico"/>')) 

If necessary.

Answer 5

I don’t know how they do it, but there is no reason why you won’t have a response from /faveicon.ico the dynamic server side of the script that generates / provides specific content based on the user information in the question.

That says ... I don’t think most browsers usually get the updated Faveicon, since most of them seem to only check it once per session.