Search code examples
javascriptgoogle-chromefavicon

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

My PM has a requirement that changing the favicon to the animated loading image. it only works in Firefox if I simply point the link.href to a gif file.

I did some researches and find that chrome doesn't support animated favicon. but wiki says chrome 4.0 support animated GIFs.

function changeFavicon() {
  var link = document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'shortcut icon';
  link.href = 'http://uploads.neatorama.com/vosa/theme/neatobambino/media/loading.gif';
  document.getElementsByTagName('head')[0].appendChild(link);
}

Above is my code, but favicon only animated in Firefox.

Solution

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