Development and UX from Michael Mahemoff. Maker of Player FM. Previously: Google, BT, O'Reilly author. Also thesis papers.

Menu

Dynamic Favicons

Favicons should ideally be easy to manipulate, as easy as manipulating the web page’s UI. (Favicons are the little website icons you see in the address bar, browser tabs, etc.) For example, a chat app like Meebo could signal that your buddy’s trying to contact you, a mail app like GMail could indicate You Have Mail!

I’ve found surprisingly little info on this – is anyone doing it? Anyway, I’ve been wanting to play around with this for a while and having recently submitted the final book draft (post pending), I finally had some spare time to play with it. Fortunately, it turns out to be perfectly feasible – it seems that Firefox and Opera both use <link> tags to determine favico, and this can be changed dynamically to satisfaction. The only gotcha is that you can’t try to be too efficient – if you reuse an existing link object and overwrite its href property, the browsers won’t pay any attention. so you simply have to remove the existing link tag and add back a new one with the new icon URL. Unfortunately, IE and Safari don’t seem to use the link technique at all – I think they just use the “favicon.ico” file. If you know of a way their icons could be dynamically manipulated, please mail me or add a comment here.

So I’ve created a library, favicon.js, that lets you manipulate favicons with a single call – changeFavicon("theIconUrl.ico");. You can also set the document title, changeFavicon("theIconUrl.ico", "Hi Everybody!"), which just sets document.title. There are a couple of demos and a brief FAQ:

Crikey!Dugg and on Delicious Popular. And, well, Ajaxian too ;-). Digg is interesting … The last time I submitted my own story to digg, it got precisely two diggs (thanks to the other guy!). This time, I didn’t bother. Is there a moral here?

New, improved, with animate(). Most people get dynamic favicons, but some people have said this whole thing is about animation, about as useful as a blink tag, etc. Okay, that kind of misses the main point, which is about notifying the user while a tab is in the background. The FAQ makes it pretty clear that animated icons was a kind of afterthought (actually, it only occurred to me after I created the cycling demo – changing according to a timer was simply the easiest way to update a background tab, since there’s no chat functionality needed or anything like that). But, you know, when a simple idea like that causes seems so wrong to some people, there’s probably wheels in it. And while I did say animated GIFs are possibly more elegant in the FAQ, it since occurred to me that it’s a bit of a hassle for the casual developer to make an animated GIF. You also get the benefit of compatibility with Opera (and maybe others?). So I’ve added an animate() method, only 8 more lines in all, that lets you cycle through a sequence of images. I expect to post it over the weekend. Mmm…Eye Candy!

When an event is fired or procedure is done on the server, a new procedure will get called and create a new Favicon in the wwwroot and flush the page, that the user is currently on, to the client. This will make the page reload and “voila” new Favicon. But you need to remain some kind of viewstate so the user don’t just gets handed a new page with all hers interactions gone (like typing etc.). And most importantly the Favicon is the same for all users.

Erik,
The arguments.length takes care of it, it’s I think the most easiest way to do overloading in JS. You could also have the arg though as you say and check if it’s defined.

Jon, It’s true you can change favicon on the server-side – if the JS did something like submit a form or change the document URL, it would force a page refresh and at that point the server could overwrite favicon.ico. In practice, I’m not convinced it would add anything, though, because apparently Safari and IE cache favicon.ico without shame. I’m still learning about all the subtleties from everyone, but that’s my perception right now.

Johan, I probably made a bit of a deal about the dropping and re-adding in case it helped anyone, though most people will probably do that anyway. For instance, with On-Demand Javascript, I’ve never even tried to overwrite a script node’s source – I’ve only ever deleted and added.

Matthias, Sweet tip. Assuming it works fine on Opera and FF, it will neaten up the code nicely.

Here, at Cathetel, we use a simple IF argument in the Head Section that allows us to direct our static favicon to Internet Explorer, and all others to display, if they are able to, the animated version. Netscape and Firefox show the animated favicon. Directions for doing this, if anyone is interested, is at http://www.cathetel.com/favicon.htm . We must study your coding though as it is more sophisticated.

Amyobus, what you’re using is a single animated GIF file, which is fine for most purposes. This article is about programmatically changing the favicon. You can use it for a straightforward animation, but since you could already do that in the way you’ve done it, the main reason to use this library is to change the icon when an event occurs.

I believe Erik’s comment about optionalDocTitle are correct, at least for FF (3.6.8). If an attempt is made to set a title as well, the script will fail with “optionalDocTitle is not defined”. To overload, I believe you’d want to use arguments[1] rather than an undefined variable, or explicitly set the variable name in the function definition.

G’Day

Welcome to Michael Mahemoff's blog, soapboxing on software and the web since 2004. I'm presently using HTML5 and the web to make podcasts easier to share, play, and discover at Player FM. I've previously worked at Google and Osmosoft, and built the Ajax Patterns wiki and corresponding book, "Ajax Design Patterns" (O'Reilly 2006).
For avoidance of doubt, I'm not a female, nor ever have been to my knowledge. The title of this blog alludes to English As She Is Spoke, a book so profoundly flawed it reminded me of the maturity of the software industry when this blog began in 2004. I believe the industry has become more sophisticated since then, particularly the importance of UX.
Follow @mahemoff