将 GIF 图像放在 favicon 中，无法在 Chrome 上运行

Question

我创建了一个 HTML/CSS 网站，其中包括 PHP 脚本、MySQL 查询和很多东西。我为页面的图标放置了一个 favicon 图像。我在网上创建的图标是一种 GIF 格式。现在，在 Mozilla Firefox 中，图像正在发生变化，我可以在 favicon 中正确地看到这两个图像。 Chrome 仅显示第一个，不会更改图像。

可能是什么原因？

Answer 1

Chrome 不支持动画网站图标，而且看起来没有人有兴趣实现它。

原始错误报告：http://code.google.com/p/chromium/issues/detail?id=19731

最新副本：http://code.google.com/p/chromium/issues/detail?id=130062

Answer 2

这适用于谷歌浏览器：

注意：您可以使用包含 Base64 编码图标的数组并循环使用 switch 语句插入的元素，但我更喜欢以这种方式分解。

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