如何animation的favicon？
如何animation像这样的favicon？
它似乎只能在Firefox中使用。
虽然目前只有FireFox支持，但其他浏览器有望在未来支持。 为了达到这个效果，你需要把gif上传到你的服务器上，然后把下面这行添加到你页面的head部分：
<link rel="icon" href="animated_favicon.gif" type="image/gif" >
看看AnimatedFavIcon.com获取更多的帮助和资源。
几乎肯定不是你要找的东西，但是有些人甚至用编程的方式写在客户端JavaScript里的图标上。 以下url显示了老式电子游戏“Defender”在favicon中播放：
http://www.p01.org/defender_of_the_favicon/
这适用于Firefox，Opera和Safari，但至less在旧版本的IE中不能使用。 我不确定最新的IE可能是什么。
在这个页面上做一个“查看源代码”使得阅读起来非常有趣。
火狐
Firefox支持animation图标。 只需在<link rel="icon">标签中添加一个GIF <link rel="icon"> ：
<link rel="icon" href="/favicon.gif">
您也可以使用animationICO文件。 在这种情况下，不支持animation图标的浏览器将仅显示第一帧。
其它浏览器
在其他浏览器中，您可以使用JavaScript为faviconanimation。 您只需从GIF中提取单个帧，并在每次GIF帧更改时更改<link rel="favicon"> src。 例如看这个代码（ JS小提琴演示 ）：
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) }
我用libgif.js来提取GIF帧。
不幸的是，Chrome中的animation不是很stream畅。 在Firefox中效果很好，但Firefox已经支持GIF图标了。
检查出favico.js库。
也可以看看
- 如何为网站添加浏览器选项卡图标（favicon）？
- dynamic改变网站图标
重命名您的animationgif为favicon.gif并将其放置在您的index.html（或index.php …或类似的位置）（public_html或其子目录，如果您有更多的网站）在您的服务器上，它会自动工作。
