Animated favicons

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.

55 thoughts on “Animated favicons

  1. Pingback: MoZoRRo - Back into action- Animated favicons

  2. Ix

    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”?

    Reply
  3. Pingback: navelfluff :: Rebirth of :: December :: 2005

  4. Proclub

    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!

    Reply
  5. Mike

    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”.

    Reply
  6. Luis Morais

    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

    Reply
  7. Pingback: navelfluff » Rebirth of blink

  8. Pingback: Pietel.be » Blog Archive » Ãœber favicon.

  9. Pingback: doug nelson: DISENGAGE! » Blog Archive » Live Life As Doug: The Easy Way.

  10. Pingback: onehero / Sundries 20060720

  11. esher

    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">

    Reply
  12. Andrew, Sqwink Design

    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…

    Reply
  13. LC

    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.

    Reply
  14. Pingback: Utilidades para crear un favicon « Cosas sencillas

  15. Pingback: 简单5步,制作动画favico(animated favico) | 随便说说SBTalk

  16. JBF

    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?

    Reply
  17. Tuan

    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.

    Reply
  18. Pingback: Selección de utilidades para crear un favicon, la guinda de tu blog. : Unión de Bloggers Hispanos

  19. Pingback: Faviconlar: Üreteçleri, Tasarımı, Yapımı | BlogcuBlogu.com

  20. *CW*

    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.

    Reply
  21. Pingback: A website checklist. 20 things to check before going live.

  22. Pingback: Hey!Buzz Blog » Blog Archive » How important is a Favicon?

  23. Pingback: HeyBuzz » Blog Archive » How important is a Favicon?

  24. Cathetel

    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.

    Reply
  25. Pingback: T&S Web Design

  26. tr0nk

    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

    Reply
  27. Pingback: animated favicons?

  28. blindignition

    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.

    Reply
  29. Irritated User

    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.

    Reply
  30. Timothy Rayner

    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.

    Reply
  31. Paul

    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.

    Reply
  32. Erken Rezervasyon

    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.

    Reply
  33. Pingback: Animated favicons | User Experience Blog

Leave a Reply to Cafalot Cancel reply

Your email address will not be published.