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

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

This is not how gmail does it, but this is how I was able to mock it: http://stackoverflow.com/questions/6964144/dynamically-generated-favicon/6964230#6964230 — Joe, Sep 09 '11 at 23:45

jon3laze · Answer 1 · 2016-04-13T19:45:50.190

7

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

edited Apr 13 '16 at 19:45

answered Sep 09 '11 at 23:42

jon3laze

3,188
6
36
69

1

This is the answer for How does GMAIL have a favicon that shows an unread message count? – coto Jan 28 '14 at 07:28

score 5 · Answer 2 · edited Apr 08 '16 at 05:48

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

e.g.

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

score 1 · Answer 3 · edited May 23 '17 at 11:46

1

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

edited May 23 '17 at 11:46

Community

1
1

answered Sep 09 '11 at 23:43

spike

9,794
9
54
85

score 0 · Answer 4 · answered Sep 09 '11 at 23:54

0

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

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

As needed.

answered Sep 09 '11 at 23:54

Michael Lorton

43,060
26
103
144

score -1 · Answer 5 · answered Sep 09 '11 at 23:43

I have no clue how they do it, but there's no reason you can't have your /faveicon.ico be responded to by a dynamic server-side script which generates/provides certain content based on information of the user in question.

That said... I don't think most browsers would get the updated Faveicon usually, as most seem to only check it once per session.

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

5 Answers5