{"id":205,"date":"2005-10-10T23:55:33","date_gmt":"2005-10-11T04:55:33","guid":{"rendered":"http:\/\/myvogonpoetry.com\/wp\/2005\/10\/10\/animated-favicons\/"},"modified":"2014-09-05T23:04:15","modified_gmt":"2014-09-06T04:04:15","slug":"animated-favicons","status":"publish","type":"post","link":"https:\/\/myvogonpoetry.com\/wp\/2005\/10\/10\/animated-favicons\/","title":{"rendered":"Animated favicons"},"content":{"rendered":"

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:
\n
\n( NOTE: <> changed to [] so this would show up)
\n[link href=\"images\/favico.gif\" TYPE=\"image\/gif\" REL=\"icon\"]
\n<\/code>
\nI 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<\/a> and renamed it to favicon.ico and it works. Visit this page to see it in action<\/a>. 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. <\/p>\n

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.<\/p>\n

On this page<\/a>, I changed the HTML so that it points to this animated gif<\/a> as its favicon and that too worked.<\/p>\n

Here is a good page to grab some animated gifs<\/a> 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.<\/p>\n

Here are a bunch of example websites that have animated favicons. View them in Firefox to see them. <\/p>\n