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 = '.gif';
  document.getElementsByTagName('head')[0].appendChild(link);
}

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

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./vosa/theme/neatobambino/media/loading.gif';
  document.getElementsByTagName('head')[0].appendChild(link);
}

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

• javascript
• google-chrome
• favicon

• Possible duplicate of How to animate a favicon? – Michał Perłakowski Commented Apr 8, 2016 at 1:30

4 Answers 4

This works for Google Chrome:

EXPLANATION: Google Chrome does not support animated Favicons. I've provided this code as an alternative to using a third-party library. In order to avoid continuous server polling, I suggest using Base64 encoded frames.

FYI: You can use an array containing the Base64 encoded icons and cycle through the elements instead of using a switch statement, but I just prefer it broken out this way.

IMPORTANT: Also important to know, the reason for using Base64 encoded images is so that there are not continuous requests made to the server for each frame.

document.head = document.head || document.getElementsByTagName('head')[0];
function changeFavicon(src) {
    var link = document.createElement('link'), oldLink = document.getElementById('dynamic-favicon');
    link.id = 'dynamic-favicon';
    link.rel = 'shortcut icon';
    link.href = src;
    if (oldLink) {
        document.head.removeChild(oldLink);
    }
    document.head.appendChild(link);
    }
function animate(){
    if ( typeof animate.i == 'undefined' ) {
        animate.i = 0;
    }
    switch(animate.i) {
        case 0:
            changeFavicon("[PUT BASE64 for ICO FRAME 1 HERE]");
            break;
        case 1:
            changeFavicon("[PUT BASE64 for ICO FRAME 2 HERE]");
            break;
        case 2:
            changeFavicon("[PUT BASE64 for ICO FRAME 3 HERE]");
            break;
        case 3:
            changeFavicon("[PUT BASE64 for ICO FRAME 4 HERE]");
            break;
        case 4:
            changeFavicon("[PUT BASE64 for ICO FRAME 5 HERE]");
            break;
        case 5:
            changeFavicon("[PUT BASE64 for ICO FRAME 6 HERE]");
            break;
        case 6:
            changeFavicon("[PUT BASE64 for ICO FRAME 7 HERE]");
            break;
        case 7:
            changeFavicon("[PUT BASE64 for ICO FRAME 8 HERE]");
            break;
        case 8:
            changeFavicon("[PUT BASE64 for ICO FRAME 9 HERE]");
            break;
        case 9:
            changeFavicon("[PUT BASE64 for ICO FRAME 10 HERE]");
            break;
        case 10:
            changeFavicon("[PUT BASE64 for ICO FRAME 11 HERE]");
            break;
        case 11:
            changeFavicon("[PUT BASE64 for ICO FRAME 12 HERE]");
            break;
        case 12:
            changeFavicon("[PUT BASE64 for ICO FRAME 13 HERE]");
            break;
        case 13:
            changeFavicon("[PUT BASE64 for ICO FRAME 14 HERE]");
            break;
        case 14:
            changeFavicon("[PUT BASE64 for ICO FRAME 15 HERE]");
            break;
        case 15:
            changeFavicon("[PUT BASE64 for ICO FRAME 16 HERE]");
            break;
    }
    animate.i = animate.i + 1;
    if(animate.i == 16){
        animate.i = 0;
    }
}
setInterval(animate,250);

I used another favicon.js. and I used 8 static icons to simulate a loading animation icon.

    favicon.animate([
                 "img/loading1.ico", "img/loading2.ico",
                 "img/loading3.ico", "img/loading4.ico",
                 "img/loading5.ico", "img/loading6.ico",
                 "img/loading7.ico", "img/loading8.ico"
               ], 50);

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.

Problem is, there's an existing favicon which you need to remove first.

function removeFavicon() {
  var myHead = document.getElementsByTagName("head")[0];
  var lnks = myHead.getElementsByTagName('link');
  var len = lnks.length;
  for (var i = 0; i < len; ++i) {

    var l = lnks[i];
    if (l.type == "image/x-icon" || l.rel == "shortcut icon") {
      myHead.removeChild(l);
      return; // Returned assuming only one favicon link tag
    }

  }
}


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

}

changeFavicon();