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.

Almost certainly not what you're looking for, but some people have gone so far as to programatically write to the favicon in client side JavaScript. The following url shows the old videogame 'Defender' playing in the favicon:

http://www.p01.org/defender_of_the_favicon/

This works in Firefox, Opera and Safari, but not in at least older versions of IE. I'm not sure what the latest IE might be capable of.

Doing a 'view source' on this page makes for quite an interesting read.

Firefox

Firefox supports animated favicons. Just add a link to the GIF in <link rel="icon"> tag:

<link rel="icon" href="/favicon.gif">

You can also use animated ICO file. In this case browsers that doesn't support animated favicons will display only the first frame.

Other browsers

In other browsers you can animate a favicon using JavaScript. You just have to extract single frames from the GIF and change <link rel="favicon"> src every time the GIF frame changes. See this code for example (JS Fiddle demo):

var $parent = document.createElement("div")
    $gif = document.createElement("img")
   ,$favicon = document.createElement("link")

// Required for CORS
$gif.crossOrigin = "anonymous"

$gif.src = "https://i.imgur.com/v0oxdQ8.gif"

$favicon.rel = "icon"

// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)

var supergif = new SuperGif({gif: $gif})
   ,$canvas

supergif.load(()=> {
  $canvas = supergif.get_canvas()
  updateFavicon()
})

function updateFavicon() {
  $favicon.href = $canvas.toDataURL()
  window.requestAnimationFrame(updateFavicon)
}

_{I used libgif.js to extract GIF frames.}

Unfortunately, the animation isn't very smooth in Chrome. In Firefox it works great, but Firefox already supports GIF favicons.

Check out also favico.js library.

See also

• How to add a browser tab icon (favicon) for a website?
• Changing website favicon dynamically