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 animted 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.pokelondon.com/
- http://www.bnr.bg/
- http://www.cleverwasteoftime.com/
- http://thepinkflyer.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)
- http://www.linuxforums.org (animates when you first load a page)
October 19th, 2005 at 11:59 pm
[…] metioned on site […]
November 14th, 2005 at 8:11 pm
Wow; those look great. One might be able to do something similar with mod_rewrite and .htaccess… maybe
“RewriteRule ^favicon.ico /favicon.ico /favicon.gif”?
December 5th, 2005 at 4:05 am
[…] es us with animated favicons! Whee! How utterly, utterly useful. Not. Co […]
December 5th, 2005 at 4:59 am
It’s easy - just take a look at the source of pod1.com. You’ll find that line
December 5th, 2005 at 4:45 pm
Here 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 :))
December 6th, 2005 at 4:27 pm
mod_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!
December 19th, 2005 at 3:12 pm
Just 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”.
January 9th, 2006 at 12:20 am
Thanks for citing me. I once explained how I did this using only free software.
RESPONSE: Yeah - I saw that - pretty cool.
–Brian
February 13th, 2006 at 1:36 pm
Have 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
February 13th, 2006 at 1:39 pm
Damn, 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
March 2nd, 2006 at 7:39 am
[…] plained that Firefox can’t really learn new tricks, Firefox amazes us with animated favicons! Whee! How utterly, utterly useful. N […]
May 23rd, 2006 at 1:16 pm
Ah, It’s a shame it only works for Firefox, I know it is loads better than IE, but still…
June 6th, 2006 at 3:37 am
[…] Dat hij er drie naast elkaar zet, dan kunnen we jackpot spelen! Lees hoe dat moet. […]
June 22nd, 2006 at 12:56 am
[…] 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. […]
July 20th, 2006 at 7:44 am
[…] Animated Favicons. I only realised this could be done a couple of days ago. So that’s how you do it. […]
February 18th, 2007 at 1:31 pm
Very good info buddy i ve used animated favicon on my site too :D
March 9th, 2007 at 8:12 am
fine 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">
May 10th, 2007 at 6:32 pm
Great 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…
June 8th, 2007 at 4:02 pm
Animated 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.
July 1st, 2007 at 6:02 am
I think this is a nice technique if not overused and abused
July 10th, 2007 at 9:32 am
[…] Cómo hacer un favicon animado (Inglés): Sencilla forma de darle a tu favicon movimiento. […]
August 15th, 2007 at 11:12 am
[…] 更多信æ¯å¯ä»¥å‚阅本文的信æ¯æ¥æºï¼šAnimated favicons […]
August 31st, 2007 at 8:55 am
Uh 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?
September 12th, 2007 at 8:02 am
This 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.
September 25th, 2007 at 3:15 pm
[…] Cómo hacer un favicon animado (Inglés): Sencilla forma de darle a tu favicon movimiento. […]
October 10th, 2007 at 1:59 pm
dear 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
October 22nd, 2007 at 4:44 am
thank yooooooooou very match to this
November 28th, 2007 at 3:25 pm
[…] 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ış. […]
January 6th, 2008 at 2:11 pm
COMON 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.
January 31st, 2008 at 9:05 pm
Awesome Post, thanks!
March 20th, 2008 at 2:18 pm
[…] 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. […]
April 21st, 2008 at 10:22 am
very nice links thank you!