How to Animate a Favicon

How to animate a favicon?

While it's currently only supported by Firefox other browsers will hopefully support it in the future. To achieve the effect, you need to upload the gif to your server and then add the line below to head section of your page:

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Take a look at AnimatedFavIcon.com for additional help and resources.

how to animate chrome and ie favicon (a loading indicator)

You may want to give a try to favico.js. It let you use a video as the favicon. Okay, this is a bit heavy for a simple GIF but you get the idea. Plus you can probably get the interesting (and multiplatform) part by looking at the code.

My animated favicon does not show animation

Get rid of the first line pointing to the favicon.png so that you have only

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />

And ensure that the favicon.ico is a real animated favicon and not something renamed. You can use http://www.animatedfavicon.com or http://www.favicongenerator.org to convert an animated .gif file to an animated .ico file.

favicon animation

It's an animated GIF file.

Putting GIF image in favicon, not working on Chrome

Chrome does not support animated favicons, and it doesn't look like anyone is interested in implementing it.

Original bug report: http://code.google.com/p/chromium/issues/detail?id=19731

Latest duplicate: http://code.google.com/p/chromium/issues/detail?id=130062

---

Related Topics