Thursday, March 16th, 2006

Dynamic Favicons

Category: Browsers, JavaScript, Programming

Michael Mahemoff has posted an interesting idea concerning other uses for the “favicon” supported by browsers these days. He suggests that favicons shoul dbe supported just as easily as any other DOM-accessible item in the page, and sets out to discover the truth.

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 tags to determine favico, and this can be changed dynamically to satisfaction.

He finds that it is entirely possible to work with the link tags to make the change, with only one real “gotcha” – reusing the same tag/node and just overwriting the content doesn’t always seem to work. Also, unfortunately, IE and Safari don’t seem to work quite the same as Firefox and Opera – they only look to the favicon.ico file on the server.

He has, however, worked up a library to work with this overlooked little feature, and includes some samples to show how it works. The first example looks for a keypress and switches it to the letter pressed, and the second example just sits and rotates through the letter icons (check it out in a unfocused tab). The Javascript to handle the changes comes in at about 32 lines.

Posted by Chris Cornutt at 8:49 am
15 Comments

+++--
3.6 rating from 61 votes

15 Comments »

Comments feed TrackBack URI

Reminds me of background color fadins and document title tickers back in Netscape 3. There may be legitimate uses for this (like the change notification the author mentions), but on the face of it its a new classic “stupid web trick” which all the script kiddies will want – congratulations :)

Sam
(who is whipping out his icon editor to give it a whirl immediately)

Comment by Sam Foster — March 16, 2006

Your not alone!!! :)

First experiment will obviously be an animation… but…

if anything, I’d probably use this to notify when a message has arrived in one of the interfaces I’ll build upcoming.

But as it doesn’t work in IE, changing the title instead would be more cross-browser effective. (that is… if you’re wanting to notify the user while their browser window is minimized)

Comment by Tim Leonard — March 16, 2006

Isn’t Meebo.com using this technique to notify a user that a new instant message has arrived?

Grtz, Bart

Comment by Bart Claeys — March 16, 2006

Could be worth mentioning that its also possible to use regular gif/jpgs/pngs (the last one preferably) for favicons.


<link type="image/png" rel="icon" href="/images/icons/roundedsquare.png">

Comment by alexander — March 16, 2006

In addition to alexander… This means you can also use animated gifs (as shown on http://www.bugmenot.com/

Comment by Gilles — March 16, 2006

That’s pretty c00l, but what would be really great is if someone would write some ajax code that makes the text blink on and off in a specified element.

Comment by trav — March 16, 2006

[…] Via Ajaxian, encuentro la forma de hacer que nuestros favicons se muevan dinámicamente mediante el úso de Javascript [ver ejemplo, ejemplo interactivo], pero en LinuxMan nos deleitó con algo parecido esto hace unos meses, algo más simple, pero igual de chulo . Solamente sin visibles desde Firefox y Opera. […]

Pingback by aNieto2K | De todo un poco » Favicons dinámicos — March 16, 2006

Pretty clever concept! I can see this becoming as prolific as the blink tag did in the late 90’s, much to the webs detriment ;)

Comment by Daniel, Rogue Connect — March 16, 2006

I was playing with the idea to have in the favicon a sparkline with some relevant information within the labeled page. Now, it would be more interesting to do this client side, with data uri.

Comment by Laurian Gridinoc — March 17, 2006

I was playing with the idea to have in the favicon a sparkline with some relevant information within the labeled page. Now, it would be more interesting to do this client side, with data uri.

[btw, comment captcha not working]

Comment by Laurian Gridinoc — March 17, 2006

[…] 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? […]

Pingback by Software As She’s Developed - Dynamic Favicons — March 17, 2006

http://ecmanaut.blogspot.com/2006/03/pick-your-own-favicons-for-other-sites.html

Comment by splintor — March 20, 2006

[…] Here is a tutorial on how to use javascript to change a site’s favicon (via Ajaxian). […]

Pingback by High Earth Orbit » Blog Archive » Favicon as quick status — March 20, 2006

there is one free favicon generator.
http://www.webscriptlab.com, Free and easy to use online tool that can create a favorites icon (favicon.ico) images for browser address bars, favorites and tabs, from pictures, logos and other graphics.

Comment by nicolas — June 6, 2007

Does anyone know if the issue with IE and Safari have been resolved? i.e., can I use dynamic favicons with IE and Safari now? Does this works for Chrome as well?

Comment by MQJ04091977 — February 27, 2009

Leave a comment

You must be logged in to post a comment.