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

Download Firefox here


, , ,

76 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
    1. games

      Greate article. Keep posting such kind of info on your
      page. Im really imprsssed by your site.
      Hello there, You have done a great job. I’ll definitely digg it and in my view suggest to my friends.
      I am confident they will bbe benefited frpm this
      website.

      My sitfe – games

      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
    1. dragon city

      I’m amazed, I must say. Seldom do I come across a blog that’s both
      equally educative and amusing, and let me tell you,
      you’ve hit the nail on the head. The problem is something that not enough people are speaking intelligently about.
      I’m very happy I came across this during my search for something regarding this.

      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.

    1. dragon city

      I loved as much as you will receive carried out right here.
      The sketch is attractive, your authored material stylish.
      nonetheless, you command get bought an edginess over that you wish
      be delivering the following. unwell unquestionably come further
      formerly again since exactly the same nearly a lot often inside
      case you shield this hike.

      Reply
    1. http://blogs.exeter.ac.uk

      I’ve been browsing on-line more than 3 hours nowadays, but I never
      discovered any interesting article like yours.
      It is pretty worth enough for me. In my opinion, if all website owners and bloggers
      made juswt right content matrial as you did, the nett will
      likely be a lot more helpful than ever before.

      Look at my web pasge :: gaming (http://blogs.exeter.ac.uk)

      Reply
  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
    1. D?Ch v? c??i

      After having these pictures don’t overlook to look at selected creates regarding wedding couple.
      The officiant is several hundred feet away standing with the groom across an expanse of freshly cut grass that probably has been recently watered.
      These can fit significantly with a traditional wedding day.

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

    hmm 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…..

    Reply
    1. boom beach generator

      W? ?ll kno? the supercell ?ants tto geerate an unlimited amo?nt of
      Diamond 99999 Click on” Connect” Button for connrct with yojr friends just make sure you don’t boom beach hack no suurvey need to. Here’s the way to get to the same placement for days on boom beach hack no survey end may be risky to your game. Boom Beach this whole new appp is the Web.

      Reply
    2. boom Beach diamond hack

      November 14t?, 2013 admin Boom Beach HackInput the number ?f Piles, Bags,
      Pouches, Crates, Boxes; Connect ?ith Yo?r device;
      Click Start Hack” button and wait. Your download will thenstart and simply the instructions below toget the best option and without it you simply can’t survive. Anyone who downloads the hack, you wil have more boom beach hack and more.

      Reply
  32. ?????

    hmm 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…..

    Reply
    1. Boom Beach Diamond Hack

      A ver? essential function of ou? website onl?, we aare going out ?f company and offering giods ?t steep discounts.
      That Is called Griefing, ?nd iPod TouchNo ROOT ?r jailbreak needed.
      Rar and extract ?t t? youir boom beach diamond hack account, ?ause you caan easily add t? y?ur desktopUpkoad and transfer ?t to the slow earning pace ?nd/or build times.

      Reply
  33. 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
  34. 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
  35. Pingback: Animated favicons | User Experience Blog

  36. Ermelinda

    I blog often and I genuinely thank you for your information.
    The article has truly peaked my interest. I am going
    to take a note of your site and keep checking for new details about once a week.
    I subscribed to your RSS feed as well.

    Reply
  37. web design

    You actually make it seem so easy with your presentation but I find
    this matter to be really something which I think I would never understand.
    It seems too complex and extremely broad for me. I’m looking forward for your next post, I will try to get the hang of
    it!

    Feel free to visit my web site – web design

    Reply
  38. ???? ?? clash of clans ?? ???????

    It carries a few cool little functions, by way of example
    automatic resizing and repositioning of text when zooming in. A faster plus more reliable connection can be achieved however, due to Wi-Fi connectivity.
    Even so, involving the years this game has been altered and became wiser.
    99 and will enable you to install and play NES ROMS in your mobile.
    In short, you need the team to help in a variety of stages of development.
    In a nutshell, the Android Application Development may influence your small business to
    next phase, expanding your clientele and enable you to earn excellent fortune.
    You read more entertainment and much more education solutions than having a traditional TV.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>