如何为网站图标制作动画？

Question

如何制作这样的图标动画？

它似乎只在 Firefox 中工作。

Answer 1

虽然它目前只有Firefox支持其他浏览器将有望支持它的未来。为了达到效果，你需要将GIF上传到服务器，然后将下面一行添加到您的网页的head部分：

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

看看 AnimatedFavIcon.com 更多的帮助和资源。

Answer 2

几乎可以肯定你要找的不是，但到目前为止，以编程写入图标在客户端的JavaScript有些人已经走了。以下网址显示旧视频游戏“后卫”在图标播放：

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

这在Firefox，Opera和Safari，但不是至少在旧版本的IE。我不知道有什么最新的IE也许有能力。

做一个“视图源”这个页面上使一个非常有趣的读取。

Answer 3

Firefox

Firefox支持的动画图标.只是添加一个链接到GIF在 <link rel="icon"> 标签：

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

你也可以利用动画ICO文件。在这种情况下浏览器，不支持的动画图标将显示只有第一框架。

其他的浏览器

在其他浏览器你可以画一个图标使用JavaScript。你只需要提取单一的框架，从GIF和变化 <link rel="favicon"> src每次GIF框架的变化。看看这个代码例如(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框架。}

不幸的是，动画是不是很顺利。在火狐它的伟大工程，但Firefox已经支持GIF图标.

检查还 favico.js 图书馆。

也参看

• 如何将浏览器标签标(图标)的一个网站?
• 改变网站动态地图标

Answer 4

有回购协议 GitHub 演示如何做到这一点。

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

本质上，他们在画布上画画，然后做 canvas.toDataURL('image/png') 然后设置 <link> href 到该数据 URL。

Answer 5

我已经创建了一个 库动画图标, 默认的是装载机动画(这是产生通过画布上的)，但它也支持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 */) {
   }
});

和用户将能够吸引单一的框架

注： 要考虑的事情如果要实现这样的事情：

• 动画时，标签不是活动使用网络工作人员，
• 不用requestAnimationFrame，因为它停止执行在MacOSX/铬甚至在网工作人员。

Answer 6

动画的图标为几乎所有的浏览器，以下工作对我来说：

1. 下载的图像，每帧的gif。

2. 链接的第一图像作为一个图标id:

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

3. 创建一种功能的循环，并使用 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);  
   }
   

4. 创建一个循环的时候窗载荷：

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

这种方法仅有助于确保更多的浏览器就可以看动画，因为其他方法只在某些浏览器和浏览器的版本。