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.

回答1:

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.

回答2:

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);

回答3:

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);

回答4:

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

}

changeFavicon();

来源：https://stackoverflow.com/questions/32105662/how-to-animate-chrome-and-ie-favicon-a-loading-indicator

标签

javascript

google-chrome

favicon