How To: Animated Favicon
Firefox allows webmasters to use animated favicons and it is likely more browsers will eventually follow suit. While Internet Explorer does not support animated icons in any way, there is an easy way to code things so that you can display an animated favicon in supported browsers and a standard icon for all others.
Normally, one could just plop the favicon.ico image in a website’s root directory and it would show up without even the need to add a link to it. To get both icons showing in all browsers, we’ll need to add not just the link to the normal favicon, but also to the animated one.
Create your animated icon 16 pixels high and wide. I recommend calling it favicon.gif and uploading it to your website’s root directory, which should be where your regular favicon.ico file is. Put the code beneath this paragraph anywhere between the <head> tags of your website, making sure the paths are accurate, and you’re good to go. Firefox will show the animated .gif as the favicon, even when the user bookmarks the page, and Internet Explorer and other browsers that do not support it will continue to use the boring non-animated version. Note, if you have a cached bookmark image, it will show it until you clear your cache.
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favico.gif">
As you can see, the first link is the regular favicon and the second is the animated version. If you want to see for yourself, I recently added an animated favicon to ForumMonkeys.
July 18th, 2007 at 8:40 am
Hi, Thanks for the tip.
just one thing when you say “Put the code below anywhere above the tag of your website” you must mean “anywhere in the head tags” right?
Ste
July 18th, 2007 at 2:27 pm
Typo! I mean anywhere above the HEAD tag. Nice catch, thanks.
July 25th, 2007 at 11:22 pm
Very nice to know, I saw one the other day on another site and thought it looked really cool. Looks like I will need to get an animated one made now ^^
November 24th, 2007 at 5:19 am
cool. implement to my new site
January 12th, 2008 at 1:52 pm
Hi
ive got this working on my main site(homepage) but it wont show on my vbulletin forum homepage?? where do i put the code for my forum…cheers
January 13th, 2008 at 9:51 am
In vBulletin it would be under “All Style Options” in the template manager. Find the window for the “headinclude” template near the top of the page and add the links there.
February 8th, 2008 at 12:56 pm
Thanks a lot!
Been trying to figure out how to get IE to display the animated favicon, now at least IE shows the boring one
February 9th, 2008 at 9:45 pm
Took me a bit to figure out how to get them both running too. Glad I could help.
April 21st, 2008 at 11:23 am
very nice words, I’ll try to put an animated favicon on my web site, thanks!
June 9th, 2008 at 6:33 am
Thank you for the info. I will try this. My friend has the animated icon and I love it.
http://Hurstprinting.com/
June 21st, 2008 at 10:26 pm
Your animated favicon and/or your transparent favicon will also work on Netscape.
We created an animated little red angel for Cathetel.com, but we had to designate
the animated version for non-Internet Explorer browsers, as IE will not display the
favicon. So on IE we have a static non-transparent angel, and on at least Netscape
and Firefox we have taken wing.
July 16th, 2008 at 3:44 pm
Great tip. I had noticed that some favicons appeared to be animated. I didn’t realise that GIFS were actually being used in place if ICOs. I assume Safari will probably have this implemented before IE does. Thanks.
September 28th, 2008 at 4:20 pm
Thanks… excellent!
October 12th, 2008 at 3:57 am
[...] How To: Animated Favicon – 创建动画收藏夹图标的技巧 [...]
February 1st, 2009 at 12:43 pm
PLEASE do NOT use animated favicons! This is incredibly annoying for your users and will just make them go to another site!
PLEASE NOTE animated favicons ALSO animate in the UI tab in FireFox and this is HUGELY distracting and annoying.
It will make users target your site as an annoying site to close immediately.
The user CANNOT stop them with Esc, and even if she/he could this is still annoying.
Please Please use common sense, do NOT use them.
February 1st, 2009 at 3:03 pm
I only use them on one of my sites, but have encountered them countless places elsewhere; I don’t find them annoying in the least, and most of the times I don’t even notice them. To be honest, I’m a little surprised anyone would find them so annoying, but that’s definitely something developers should consider. Thank you for sharing your viewpoint.
The animated icons really don’t serve any purpose other than maybe having your bookmarked site stand out from the other, non-animated favicons in the bookmark list. Not sure if that can really be called a benefit if it annoys some people. though…
February 4th, 2009 at 8:12 am
Thinking about my Delicious sidebar in Firefox – if everyone started using animated favicons that could potentially become a mini riot of jumping, winking and flickering images.
An animated favicon won’t stand out if they become the norm.
Thinking again about the list of links in my sidebar – a favicon makes links distinctive and easy to scan for. A bunch of gifs that never stay in one fixed state will be harder to search through.
I think I’ve talked myself out of the idea.
Great post all the same BTW
February 14th, 2009 at 3:59 am
I agree with ‘irritant user’ that animated favicons can be (very)annoying. However, I think I also have a solution.
I have just launched a concept with animated favicons. I’ve created six animated favicons (different favicons for different tabs/ares), integrated with my (own) personal brand strategy. That implies that my face is shown, including attributes. On opening a page (or bookmarks) they are standing still, actually 80% of the time. After a little while, a sometimes funny, movie is played in the favicon.
Here’s the site and a posting with lots of background info:
http://www.erwinvanlun.com/ww/full/animated_favicons/
u?
For the next step I consider let the favicon ‘play’ with the title or starting a sound. That would be great. But it should all be very subtle, as lots of animated favicons will soon irritate.
I’m interested in what you think!
February 20th, 2009 at 1:54 pm
I second (or third) the ‘annoying prospect’ of animated icons.
Any intrusive (or in your face) behavior that CAN NOT BE TURNED OFF is a big NO NO NO!
Fad behavior, like that blinking underlined text from the Netscape/Aol days, or that obscenely annoying scrolling Marquee in all directions are a big pain.
A modest animation with very low ‘blink’ rate (or even in your monkey icon case, a behavior that occurs intermittently (achieve this by varying the interframe delay for the gif) would be ok,kinda like an easter egg of sorts, but the constant,rapid blink favicon??? no!
THOUGHT: it may be possible to block annoying Favicons by denying the offending gif with ADBLOCK so maybe we can deal with it?
Still, a site that deliberately and insensitively pisses me off will find itself block from my HOSTS file as well!
February 24th, 2009 at 1:52 pm
We have ours and they rock! Guitars, DJ equipment, you must have animation! Cheers.
March 24th, 2009 at 3:42 am
[...] http://www.eyestormstudio.com/blog/?p=8 http://www.viomatrix.de/cms-kostenlos-bilder-icons-animierte-favicon-webseite-gif.html [...]
October 17th, 2009 at 5:55 pm
Working…….
October 22nd, 2009 at 9:53 am
Thanks for the tip-off, fellow blogger! I’m an animator, so this comes as GREAT news to me. I’ll be adding animated favicons to my blog and webpage in the next lil while.