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 – 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://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)
Pingback: MoZoRRo - Back into action- Animated favicons
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”?
Pingback: navelfluff :: Rebirth of :: December :: 2005
It’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
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 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 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 this using only free software.
RESPONSE: Yeah – I saw that – pretty cool.
–Brian
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
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
Pingback: navelfluff » Rebirth of blink
Ah, It’s a shame it only works for Firefox, I know it is loads better than IE, but still…
Pingback: Pietel.be » Blog Archive » Ãœber favicon.
Pingback: doug nelson: DISENGAGE! » Blog Archive » Live Life As Doug: The Easy Way.
Pingback: onehero / Sundries 20060720
Very good info buddy i ve used animated favicon on my site too :D
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">
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…
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.
I think this is a nice technique if not overused and abused
Pingback: Utilidades para crear un favicon « Cosas sencillas
Pingback: 简å•5æ¥ï¼Œåˆ¶ä½œåŠ¨ç”»favico(animated favico) | éšä¾¿è¯´è¯´SBTalk
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?
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.
Pingback: Selección de utilidades para crear un favicon, la guinda de tu blog. : Unión de Bloggers Hispanos
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
thank yooooooooou very match to this
Pingback: Faviconlar: Üreteçleri, Tasarımı, Yapımı | BlogcuBlogu.com
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.
Awesome Post, thanks!
Pingback: A website checklist. 20 things to check before going live.
very nice links thank you!
You can paint animated favicons at favicon.cc online.
yes, you can rename image.gif to be favicon.gif, or you can use favicon generator.
Pingback: Hey!Buzz Blog » Blog Archive » How important is a Favicon?
Pingback: HeyBuzz » Blog Archive » How important is a Favicon?
Here, 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.
Pingback: T&S Web Design
i 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.
fine, 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
Pingback: animated favicons?
Check 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!
I’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 this.
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.
Please Please use common sense, do NOT use them.
I 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 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 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.
Just saw my first animated favicon today and I think they are fun. Some people just have no sense of humor. Thanks for blogging about it! I look forward to experimenting with it to see what is possible at that small size.
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 mouse.
making them animated is distracting and annoying. please dont do this..
This reminds me of the flaming skulls from 1996 when the web was just starting to get some real use.
Pingback: Animated favicons | User Experience Blog