Putting GIF image in favicon, not working on Chrome

Question

I created a HTML/CSS website which includes PHP scripts, MySQL queries and a lot of things. I put a favicon image for the icon of the page. The favicon I created online was kind of GIF format. Now, in Mozilla Firefox, the image is changing and I am properly able to see the two images in favicon. Chrome shows only the first one and does not change the images.

What could be the reason possibly?

Possible duplicate of [How to animate a favicon?](http://stackoverflow.com/questions/1837261/how-to-animate-a-favicon) — Michał Perłakowski, Apr 08 '16 at 01:30

nullability · Accepted Answer · 2013-04-18T18:20:43.330

9

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

edited Apr 18 '13 at 18:20

answered Apr 18 '13 at 18:11

nullability

10,545
3
45
63

score 1 · Answer 2 · answered Apr 12 '16 at 20:53

This works for Google Chrome:

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

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

Putting GIF image in favicon, not working on Chrome

2 Answers2