Html 如何为网站图标设置动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1837261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to animate a favicon?
提问by tonyf
How to animate a favicon like that?
如何为这样的网站图标制作动画？
It seems to work only in Firefox.
它似乎只适用于 Firefox。
采纳答案by Chris Van Opstal
While it's currently only supported by FireFox other browsers will hopefully support it in the future. To achieve the effect, you need to upload the gif to your server and then add the line below to headsection of your page:
虽然它目前仅被 FireFox 支持，但其他浏览器有望在未来支持它。要达到效果，您需要将 gif 上传到您的服务器，然后将以下行添加到head您的页面部分：
<link rel="icon" href="animated_favicon.gif" type="image/gif" >
Take a look at AnimatedFavIcon.comfor additional help and resources.
查看AnimatedFavIcon.com以获得更多帮助和资源。
回答by teapot7
Almost certainly not what you're looking for, but some people have gone so far as to programatically write to the favicon in client side JavaScript. The following url shows the old videogame 'Defender' playing in the favicon:
几乎可以肯定不是您要查找的内容，但有些人甚至以编程方式在客户端 JavaScript 中写入网站图标。以下网址显示了在收藏夹图标中播放的旧视频游戏“Defender”：
http://www.p01.org/defender_of_the_favicon/
http://www.p01.org/defender_of_the_favicon/
This works in Firefox, Opera and Safari, but not in at least older versions of IE. I'm not sure what the latest IE might be capable of.
这适用于 Firefox、Opera 和 Safari，但至少不适用于旧版本的 IE。我不确定最新的 IE 可能有什么功能。
Doing a 'view source' on this page makes for quite an interesting read.
在这个页面上做一个“查看源代码”是一个非常有趣的阅读。
回答by Micha? Per?akowski
Firefox
火狐
Firefox supports animated favicons. Just add a link to the GIF in <link rel="icon">tag:
Firefox 支持动画图标。只需在<link rel="icon">标签中添加指向 GIF 的链接：
<link rel="icon" href="/favicon.gif">
You can also use animated ICO file. In this case browsers that doesn't support animated favicons will display only the first frame.
您还可以使用动画 ICO 文件。在这种情况下，不支持动画图标的浏览器将只显示第一帧。
Other browsers
其它浏览器
In other browsers you can animate a favicon using JavaScript. You just have to extract single frames from the GIF and change <link rel="favicon">src every time the GIF frame changes. See this code for example (JS Fiddle demo):
在其他浏览器中，您可以使用 JavaScript 为网站图标设置动画。您只需要从 GIF 中提取单个帧并在<link rel="favicon">每次 GIF 帧更改时更改src。例如，请参阅此代码（JS Fiddle 演示）：
var $parent = document.createElement("div")
$gif = document.createElement("img")
,$favicon = document.createElement("link")
// Required for CORS
$gif.crossOrigin = "anonymous"
$gif.src = "https://i.imgur.com/v0oxdQ8.gif"
$favicon.rel = "icon"
// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)
// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)
var supergif = new SuperGif({gif: $gif})
,$canvas
supergif.load(()=> {
$canvas = supergif.get_canvas()
updateFavicon()
})
function updateFavicon() {
$favicon.href = $canvas.toDataURL()
window.requestAnimationFrame(updateFavicon)
}
I used libgif.jsto extract GIF frames.
我使用libgif.js来提取 GIF 帧。
Unfortunately, the animation isn't very smooth in Chrome. In Firefox it works great, but Firefox already supports GIF favicons.
不幸的是，Chrome 中的动画不是很流畅。在 Firefox 中它运行良好，但 Firefox 已经支持 GIF 图标。
Check out also favico.jslibrary.
另请查看favico.js库。
See also
也可以看看
回答by Lance Pollard
There are repos on GitHubdemonstrating how to do this.
有关于回购GitHub上演示如何做到这一点。
http://lab.ejci.net/favico.js/example-simple/
http://lab.ejci.net/favico.js/example-simple/
Essentially they draw on the canvas and then do canvas.toDataURL('image/png')and then set the <link>href to that data-url.
本质上，他们在画布上绘制，然后执行canvas.toDataURL('image/png')，然后将<link>href 设置为该数据 url。
回答by Malmadork
To animate the favicon for pretty much ALL browsers, the following worked for me:
要为几乎所有浏览器的网站图标设置动画，以下内容对我有用：
Download an image of each frame of the gif.
Link the first image as an icon with an id:
<link rel="icon" type="image/png" href="/image1.png" id="icon"/>Create a function to loop, and use
setTimeout()for each image. The times are variable and can be set to however fast you would like the animation. Here's an example: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); }Create a loop when the window loads:
window.onload = function() { setInterval(function() { iconChange(); }, 250); };
下载 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); };
This method just helps to ensure that more browsers can see the animation, because other methods only work in certain browsers, and browser versions.
这种方法只是帮助确保更多的浏览器可以看到动画，因为其他方法只适用于某些浏览器和浏览器版本。
回答by jcubic
I've created a library to animate favicon, default is loader animation (it's generated by canvas), but it also support gif animation for browser that don't support gif out of the box (from version 0.3.0).
我创建了一个库来制作 favicon 动画，默认是加载器动画（它由画布生成），但它也支持不支持开箱即用 gif 的浏览器的 gif 动画（从 0.3.0 版开始）。
API is simple
API很简单
favloader.init({
color: 'red'
});
favloader.start();
favloader.stop();
Version 0.4.0 will have callback function that will generate a frame something like:
0.4.0 版本将具有回调函数，该函数将生成类似于以下内容的帧：
favloader.init({
frame: function(ctx /* canvas context 2D */) {
}
});
and user will be able to draw single frame
并且用户将能够绘制单帧
NOTE:Things to consider if you want to implement something like this:
注意：如果你想实现这样的东西，需要考虑的事情：
- to animate when tab is not active use web worker,
- don't use requestAnimationFrame, because it stop executing in MacOSX/Chrome even in web worker.
- 在选项卡未处于活动状态时使用网络工作者进行动画处理，
- 不要使用 requestAnimationFrame，因为它会在 MacOSX/Chrome 中停止执行，即使在 web worker 中也是如此。
