如何为favicon制作动画？

Question

如何为这样的图标动画？

它似乎只适用于Firefox.

Answer 1

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

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

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

Answer 2

几乎肯定不是你想要的,但有些人甚至已经编程地在客户端JavaScript中编写了favicon.以下网址显示了在favicon中播放的旧视频游戏"Defender":

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

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

在此页面上执行"查看源代码"非常有趣.

Answer 3

火狐

Firefox支持动画favicon.只需在<link rel="icon">标签中添加指向GIF的链接:

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

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

其它浏览器

在其他浏览器中,您可以使用JavaScript为favicon设置动画.您只需从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)
}

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

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

查看favico.js库.

也可以看看

• 如何为网站添加浏览器选项卡图标(favicon)？
• 动态更改网站图标

Answer 4

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

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

此方法只是有助于确保更多的浏览器可以看到动画，因为其他方法仅适用于某些浏览器和浏览器版本。

Answer 5

有关于回购GitHub上演示如何做到这一点。

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

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