火狐

Question

如何设置这样的图标动画？

animated favicon

它似乎仅适用于Firefox。

Answer 1

虽然它目前仅受FireFox支持，但其他浏览器有望在未来支持它。要实现此效果，您需要将gif上传到您的服务器，然后将以下行添加到您网页的head部分：

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

请查看AnimatedFavIcon.com以获取更多帮助和资源。

Answer 2

几乎肯定不是你想要的东西，但有些人甚至已经以编程方式在客户端JavaScript中写入了favicon。以下网址显示了在favicon中播放的旧视频游戏“后卫”：

http://www.p01.org/defender_of_the_favicon/

这适用于Firefox，Opera和Safari，但至少不适用于旧版本的IE。我不确定最新的IE可能是什么。

在此页面上执行“查看源代码”非常有趣。

Answer 3

火狐

Firefox支持动画的favicon。只需在51.415600代码中添加指向GIF的链接：

        SSLContext sslContext = SSLContexts.createDefault();
        SSLConnectionSocketFactory sslConnectionSocketFactory = new SSLConnectionSocketFactory(sslContext,
                                                                          new String[]{"TLSv1.1", "TLSv1.2"},
                                                                          null,
                                                                          new NoopHostnameVerifier());
        CloseableHttpClient client = HttpClientBuilder.create()
                .setDefaultCookieStore(cookieStore)
                .setSSLSocketFactory(sslConnectionSocketFactory)
                .build();

您还可以使用动画ICO文件。在这种情况下，不支持动画favicon的浏览器将仅显示第一帧。

其他浏览器

在其他浏览器中，您可以使用JavaScript为favicon设置动画。您只需从GIF中提取单个帧，并在每次GIF帧更改时更改<link rel="icon"> src。请参阅此代码（例如JS Fiddle demo）：

<link rel="icon" href="/favicon.gif">

_{我使用libgif.js来提取GIF帧。}

不幸的是，Chrome中的动画并不是很流畅。在Firefox中它运行良好，但Firefox已经支持GIF favicons。

还可以查看favico.js库。

另见

Answer 4

GitHub上有一个存储库，演示了如何执行此操作。

http://lab.ejci.net/favico.js/example-simple/

基本上，他们在画布上绘画，然后执行canvas.toDataURL('image/png')，然后将<link> href设置为该数据URL。

Answer 5

我创建了一个library to animate favicon，默认为加载程序动画（由画布生成），但是它还为不支持gif的浏览器支持gif动画（从0.3.0版本开始）

API很简单

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

0.4.0版具有回调函数，该函数将生成类似以下内容的框架：

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

用户将可以绘制单帧

注意：：如果要实现这样的操作，需要考虑的事项：

在选项卡未激活时进行动画制作，请使用Web Worker
请勿使用requestAnimationFrame，因为它甚至在Web Worker中也不会在MacOSX / Chrome中执行。

Answer 6

要为几乎所有浏览器制作图标图标动画，以下代码对我有用：

下载gif每一帧的图像。

将第一张图片链接为带有ID的图标：

<link rel="icon" type="image/png" href="/image1.png" id="icon"/>

创建一个循环函数，并对每个图像使用setTimeout()。时间是可变的，可以将其设置为您想要动画的速度。这是一个示例：

function iconChange() {
setTimeout(function(){ document.getElementById("icon").href = "/image1.png";}, 333);
setTimeout(function(){ document.getElementById("icon").href = "/image2.png";}, 667);
setTimeout(function(){ document.getElementById("icon").href = "/image.png";}, 1000);  
}

在窗口加载时创建循环：

window.onload = function() {
setInterval(function() {
iconChange();
}, 250);
};

此方法仅有助于确保更多浏览器可以看到动画，因为其他方法仅在某些浏览器和浏览器版本中有效。

如何为favicon制作动画？

6 个答案:

火狐

其他浏览器

另见