Animated favicons
10/10/2005
- Like t-shirts? Try the ultimate t-shirt search engine.
Maybe everyone already knew about these, but I just stumbled on them a few weeks ago and found some more yesterday. You can have animated favicons in Firefox! The icons for each site on the Firefox tabs are animated and when you bookmark them, the bookmark icon is animated too. A quick peek at the HTML of a page with animated favicons shows they simply have a 16×16 animated gif and point the page to that as their favicon with this:
( NOTE: <> changed to [] so this would show up)
[link href="images/favico.gif" TYPE="image/gif" REL="icon"]
I have also read that you can just rename your 16×16 animated gif as favicion.ico but that just seems wrong. I just tried that and it does indeed work though. I just took this animated gif and renamed it to favicon.ico and it works. Visit this page to see it in action. The nice thing about doing it this way is that you don’t have to go change all of your pages. It didn’t show up for me in IE though.
A quick and easy way to see how an image would look as a favicon is to simply view the image in Firefox. When you view an image in Firefox, it shows it as a favicon in the tab and in the address bar. This makes it easy to scour the web for a good animated gif as a favicon. Simply find an image and “view image” in Firefox to see how it would look.
On this page, I changed the HTML so that it points to this animated gif as its favicon and that too worked.
Here is a good page to grab some animated gifs to play around with. Choose your style and put a letter in the edit field and hit submit then right click on the animated letter and save the image. That’s where I got both of the example images for my own tests.
Here are a bunch of example websites that have animated favicons. View them in Firefox to see them.
- http://funlinksdaily.com
- http://pipa.ws
- http://www.pod1.com/
- http://www.cleverwasteoftime.com/
- http://www.stonewall.co.za (animates periodically)
- http://graphiste.crea.free.fr/
- http://www.couleur3.ch/
- http://schestowitz.com/
- http://bugmenot.com (animates periodically)






[...] metioned on site [...]
MoZoRRo - Back into action- Animated favicons | 10/19/2005[...] metioned on site [...]
Wow; those look great. One might be able to do
Ix | 11/14/2005Wow; those look great. One might be able to do something similar with mod_rewrite and .htaccess… maybe
“RewriteRule ^favicon.ico /favicon.ico /favicon.gif”?
[...] es us with animated favicons! Whee! How utterly, utterly
navelfluff :: Rebirth of :: December :: 2005 | 12/5/2005[...] es us with animated favicons! Whee! How utterly, utterly useful. Not. Co [...]
It's easy - just take a look at the source
MrMagix | 12/5/2005It’s easy - just take a look at the source of pod1.com. You’ll find that line
Here is a nice Site and a package of animated
Cafalot | 12/5/2005Here is a nice Site and a package of animated
Icons - i love this boy´s site
http://favicons.pouessel.org/frame.html
try it out it is great also not animated Icons
and here is one site for handmade favicons yourself ;)
http://www.html-kit.com/favicon/
nice time on net Cafalot :))
mod_rewrite: This is just plain wrong. First of all, it
Proclub | 12/6/2005mod_rewrite: This is just plain wrong. First of all, it does nothing, because what something will get interpreted as depends on the MIME header. Secondly, favicons should be ICO format, since IE will only support ICO favicons. FF and Opera accept all types of favicons. But changing the extensions will NOT change a thing!
Just like you I just found out that animated favicons
Mike | 12/19/2005Just like you I just found out that animated favicons are possible and do in fact exist.
I immediatley did a search on Google for “animated favicon” and the first match is for The Pink Flyer.
Here’s the strange part: the site has an animated favicon BUT no mention of the fact anywhere on the site.
Just how smart has the google searchbot gotten?
-Mike
RESPONSE: If you click on the cached version of thepinkflyer, google tells you this: “These terms only appear in links pointing to this page: animated favicon”. So, because people have linked ot the site saying it has an animated favicon, it now comes up in a search for “animated favicon”.
Thanks for citing me. I once explained how I did
Roy Schestowitz | 1/9/2006Thanks for citing me. I once explained how I did this using only free software.
RESPONSE: Yeah - I saw that - pretty cool.
–Brian
Have you tried resetting the icon location adn filename with
Luis Morais | 2/13/2006Have you tried resetting the icon location adn filename with an IE comment?
//
[link href=”images/favico.ico” TYPE=”image/gif” REL=”icon”]
//
Cheers,
Luis
Webalorixá
http://www.webalorixa.net
Damn, the ie comments are filtered out, just make a
Luis Morais | 2/13/2006Damn, the ie comments are filtered out, just make a search for IE comments if you are not sure about those yet. If it works, I want my name in golden lettering as the first link in your homepages please use the words web design in the link ;).
Can not test now as I am at work…
Cheers again,
Luis
[...] plained that Firefox can’t really learn new tricks, Firefox
navelfluff » Rebirth of blink | 3/2/2006[...] plained that Firefox can’t really learn new tricks, Firefox amazes us with animated favicons! Whee! How utterly, utterly useful. N [...]
Ah, It's a shame it only works for Firefox, I
Keith | 5/23/2006Ah, It’s a shame it only works for Firefox, I know it is loads better than IE, but still…
[...] Dat hij er drie naast elkaar zet, dan kunnen
Pietel.be » Blog Archive » Über favicon. | 6/6/2006[...] Dat hij er drie naast elkaar zet, dan kunnen we jackpot spelen! Lees hoe dat moet. [...]
[...] FAVICONS No site you launch should be sans Favicon.ico.
doug nelson: DISENGAGE! » Blog Archive » Live Life As Doug: The Easy Way. | 6/22/2006[...] FAVICONS No site you launch should be sans Favicon.ico. Head over to PhotoshopSupport to get the basic plugin and setup, but if you want to take it that extra, irritating step, check out My Vogon Poetry’s guide to animated favicons. [...]
[...] Animated Favicons. I only realised this could be done
onehero / Sundries 20060720 | 7/20/2006[...] Animated Favicons. I only realised this could be done a couple of days ago. So that’s how you do it. [...]
Very good info buddy i ve used animated favicon on
Samir | 2/18/2007Very good info buddy i ve used animated favicon on my site too :D
fine fine. buzt please use entities to write some html
esher | 3/9/2007fine fine. buzt please use entities to write some html on a page. for me quotes where wrong…
<link href="/img/favico.gif" TYPE="image/gif" REL="icon">
Great article...I'm thinking about designing an animated favicon, but I'm
Andrew, Sqwink Design | 5/10/2007Great article…I’m thinking about designing an animated favicon, but I’m unsure about the IE thing. You stated it doesn’t work for Explorer, but what happens instead? Does IE just use a frame from the animation, or treat the web page is if there is NO favicon.ico at all?
Can you have an animation for Firefox (and Opera maybe) and a ‘backup’ for IE?
Any answers would be great, thanks…
Animated Favicons are WRONG. Firefox is doing what we complain about
LC | 6/8/2007Animated Favicons are WRONG.
Firefox is doing what we complain about Microsoft for - overriding the use of the file extension and parsing the data incorrectly.
Firefox should treat GIF data contained within *.ico files as CORRUPT, and not display them.
Whats next, an exploit based upon somebody using .EXE data and firefox running the program?
I will be creating a bug request about this pronto, my firefox has been told to NEVER display animation (about:config -> image.animation_mode=none).
I mention this because now I have animated icons flashing on my screen and I have no way to turn them off without removing ALL favicons (which was a very nice thing until this).
I have removed every site which uses an animated icon from my bookmarks and will be encouraging others to do the same.
I think this is a nice technique if not overused
Indigo | 7/1/2007I think this is a nice technique if not overused and abused
[...] Cómo hacer un favicon animado (Inglés): Sencilla forma de
Utilidades para crear un favicon « Cosas sencillas | 7/10/2007[...] Cómo hacer un favicon animado (Inglés): Sencilla forma de darle a tu favicon movimiento. [...]
[...] 更多信æ¯å¯ä»¥å‚é˜…æœ¬æ–‡çš„ä¿¡æ¯æ¥æºï¼šAnimated favicons [...]
简å•5æ¥ï¼Œåˆ¶ä½œåŠ¨ç”»favico(animated favico) | éšä¾¿è¯´è¯´SBTalk | 8/15/2007[...] 更多信æ¯å¯ä»¥å‚é˜…æœ¬æ–‡çš„ä¿¡æ¯æ¥æºï¼šAnimated favicons [...]
Uh oh, sombody's cranky... GIFs, Animated GIFs and PNGs are standards
JBF | 8/31/2007Uh oh, sombody’s cranky…
GIFs, Animated GIFs and PNGs are standards compliant. There is no reason to change the extension of the file as long as you define the type in the link correctly (ie type=image/gif or type=image/png). If done tastefully, an animated bookmark icon could very well bring more repeat visits by getting your attention in a long list of links, although in the case of some people who only want the internet to be a boring text based wasteland, I guess it could get annoying if done poorly.
I haven’t gotten around to testing it, but if you put a static image (.ico) as your favicon in your root directory, and then link to the animated gif in the head of your page, will IE read the favicon and FF read the animation, or does one take over the other?
This little trick is cool, but I am not
Tuan | 9/12/2007This little trick is cool, but I am not encouraging to use it until FF displays that animated favicon on the active tab (window) only, and somehow have an option for users to disable it as well. Too much motion will confuse your attention and makes your screen like a mess.
[...] Cómo hacer un favicon animado (Inglés): Sencilla forma de
Selección de utilidades para crear un favicon, la guinda de tu blog. : Unión de Bloggers Hispanos | 9/25/2007[...] Cómo hacer un favicon animado (Inglés): Sencilla forma de darle a tu favicon movimiento. [...]
dear sir I have read very carefully your comments on
hami akdurak | 10/10/2007dear sir
I have read very carefully your comments on how to make an animated favicon for a site but I could not succeed. I can see it at the firefox but I cannot make it as a favicon ( http://www.isinelektronik.com/radioation.gif )
Can you please help me which script I have to add to my index.htm to have this gif file as a favicon.
have a nice day
hami akdurak
akdurakh@gmail.com
thank yooooooooou very match to this
العاب للبنات Ùقط | 10/22/2007thank yooooooooou very match to this
[...] Son zamanlarda sitelerde animasyonlu faviconlar görünmeye başladı. Bunu yapmanın
Faviconlar: Üreteçleri, Tasarımı, Yapımı | BlogcuBlogu.com | 11/28/2007[...] Son zamanlarda sitelerde animasyonlu faviconlar görünmeye baÅŸladı. Bunu yapmanın birkaç yolunu bulabildim. JavaScript ile yapmak için burayı, Photoshop için de burayı inceleyebilirsiniz. Ayrıca bir de burası var. Photoshop‘tan bahsetmiÅŸken ico formatında dosyalar elde etmek için ÅŸuradaki eklentiyi kullanabilirsiniz. Yine Photoshop ile ilgili ÅŸurada da bilgi mevcut. Faviconların bir diÄŸer özelliÄŸi de bir sitenin sık kullanılanlara eklenmesiyle menüde ilgili sitenin faviconunun yer alması. Ancak Internet Explorer kullanıcıları bu konuda problem yaşıyor. Sitenin faviconu kısa bir zaman sonra Internet Explorer’ın küçük logosuna dönüyor. Bu sorunu halletmek için ÅŸuradaki yazıyı okuyabilirsiniz. Firefox kullanıcılarının ise böyle bir sorunu bulunmuyor. Ancak Firefox kullanıcıları eÄŸer isterse faviconlar kaldırabilir. Bunun yolu da ÅŸurada anlatılmış. [...]
COMON IE! If I open a site in FF and drag
*CW* | 1/6/2008COMON IE!
If I open a site in FF and drag the URL to my desktop, the icon changes from an animated GIF to the standard ‘e’ logo.
Something to do with the system32.dll?
see cool animated gif at
http://www.dennisnelsondraftingdesign.com/
only viewable in FF
drag URL to your desktop
right click to ‘properties’
‘change icon’
and you are forced to -
C:\WINDOWS\system32\url.dll
where icon files are located.
Awesome Post, thanks!
richard | 1/31/2008Awesome Post, thanks!
[...] and it will appear when you add the icon
A website checklist. 20 things to check before going live. | 3/20/2008[...] and it will appear when you add the icon to your browsers favourites. You can also have animated icons in Firefox. Which is a little gimmicky, but hey I thought I’d throw it in there for completeness sake. [...]
very nice links thank you!
forniture alberghiere | 4/21/2008very nice links thank you!
You can paint animated favicons at favicon.cc online.
Favicon | 5/2/2008You can paint animated favicons at favicon.cc online.
yes, you can rename image.gif to be favicon.gif, or you
animated favicon | 5/27/2008yes, you can rename image.gif to be favicon.gif, or you can use favicon generator.
[...] shouldn’t be mentioning this, but) a Favicon can move
Hey!Buzz Blog » Blog Archive » How important is a Favicon? | 6/3/2008[...] shouldn’t be mentioning this, but) a Favicon can move in Firefox!! Just make an animated gif (resource). Furthermore, Favicon-type things can be of more importance when considering mobile devices. For [...]
[...] shouldn’t be mentioning this, but) a Favicon can move
HeyBuzz » Blog Archive » How important is a Favicon? | 6/18/2008[...] shouldn’t be mentioning this, but) a Favicon can move in Firefox!! Just make an animated gif (resource). Furthermore, Favicon-type things can be of more importance when considering mobile devices. For [...]
Here, at the Angel of the Garden, we were able
Cathetel | 6/21/2008Here, at the Angel of the Garden, we were able to create our animated favicon and have it take flight (it’s a little red angel) on both Firefox and Netscape. But when you view the site on Internet Explorer it’s static. Had to use a different file for Explorer or it would have deleted the favicon. So you need one file for Non-Explorer browsers, and
one file (animated AND transparent) for the other browsers. I have only tested Firefox and Netscape.
[...] http://myvogonpoetry.com/wp/2005/10/10/animated-favicons/ [...]
T&S Web Design | 7/14/2008[...] http://myvogonpoetry.com/wp/2005/10/10/animated-favicons/ [...]
i found a great (animated) favicon creator!:D favicon.cc ... its
silviu | 7/16/2008i found a great (animated) favicon creator!:D favicon.cc … its just great! (i have also created an animated favicon for my site http://www.fav-mov.com )
Animated favicons. My opinion: Bad for users. Good for advertisers.
null | 7/18/2008Animated favicons. My opinion:
Bad for users.
Good for advertisers.
fine, but only if i can choose to disable them
tr0nk | 8/1/2008fine, but only if i can choose to disable them from animating
the last thing i want is more crap blinking at me
props for pointing out firefox is pulling an IE by violating standards; i hope that bug report works out
[...] Here's a page with a little more detail on
animated favicons? | 8/3/2008[...] Here’s a page with a little more detail on making animated favicons along with some example links: Animated favicons ——————– Science Chats | Disabled NYC | The Chic Petite Quote | [...]
Check out favtape.com....they somehow figured out how to use a
blindignition | 8/14/2008Check out favtape.com….they somehow figured out how to use a flash file that actually acts as an EQ monitor for the music that is playing. Pretty wild.
neato!
girl_has_brain | 10/13/2008neato!
I'll see your EQ monitor icon and raise you by
Gruntfuggly | 11/7/2008I’ll see your EQ monitor icon and raise you by a playable game in a favicon…
http://www.p01.org/releases/DHTML_contests/files/DEFENDER_of_the_favicon/
making them animated is distracting and annoying. please dont do
JF | 11/16/2008making them animated is distracting and annoying. please dont do this.
PLEASE do NOT use animated favicons! This is incredibly
Irritated User | 2/1/2009PLEASE 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.
Please Please use common sense, do NOT use them.
I think I've something unique. I've created six animated favicons
Erwin van Lun | 2/14/2009I think I’ve something unique. I’ve created six animated favicons (different favicons for different tabs/ares), integrated with my personal brand strategy.
Here’s the site and a posting with lots of background info:
http://www.erwinvanlun.com/ww/full/animated_favicons/
I’m interested in what you think!
I created one on only one page of my website
Yellow SEO | 4/3/2009I created one on only one page of my website to test it with a pretty cool long animation…
http://www.yellowseo.com/link_building_services/
Tell me what you thinks
Congratulations! The greatest thing since blink tags! The only way I'd
Timothy Rayner | 6/30/2009Congratulations! The greatest thing since blink tags!
The only way I’d have an animated favicon is if it was a very slow animation producing a subtle “gradual change” effect. That would mean a lot of frames, which would mean a filesize perhaps too large for a favicon. So I guess I probably wouldn’t even do a subtle animation.
I keep most of my favicons on my toolbar. The last thing I want is them blinking, flashing and moving on me. The posters who said you’d lose customers are right. You’d definitely lose me! Now an icon that subtly animates on mouseover…. that might be different.
hmm its really a nice blog and in ny opinion
????? | 10/26/2009hmm its really a nice blog and in ny opinion it provide the information and provide the oppertunity to the other to share their ideas any way congrats and i hope this blog will provide the info about the other topics too.
my experience with the site URL http://games.m5zn.com/ is really very interesting and hope you will find it really kool site…..
hmm its really a nice blog and in ny opinion
????? | 10/26/2009hmm its really a nice blog and in ny opinion it provide the information and provide the oppertunity to the other to share their ideas any way congrats and i hope this blog will provide the info about the other topics too.
my experience with the site URL http://games.m5zn.com/ is really very interesting and hope you will find it really kool site…..