html - 如何为网站图标设置动画？

Question

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

它似乎只在 Firefox 中有效。

Answer 1

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

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

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

Answer 2

几乎可以肯定不是您正在寻找的东西，但有些人甚至以编程方式写入客户端 JavaScript 中的 favicon。以下 url 显示了在 favicon 中播放的旧视频游戏“Defender”：

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

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

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

Answer 3

火狐

Firefox 支持动画网站图标。只需在<link rel="icon">标签中添加指向 GIF 的链接：

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

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

其它浏览器

在其他浏览器中，您可以使用 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)
}

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

不幸的是，动画在 Chrome 中不是很流畅。在 Firefox 中效果很好，但 Firefox 已经支持 GIF favicons。

还可以查看favico.js库。

也可以看看

• 如何为网站添加浏览器标签图标（favicon）？
• 动态更改网站图标

Answer 4

GitHub 上的存储库演示了如何执行此操作。

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

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

Answer 5

我创建了一个库来为 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工作员，
• 不要使用 requestAnimationFrame，因为它会在 MacOSX/Chrome 中停止执行，即使在 web worker 中也是如此。

Answer 6

要为几乎所有浏览器设置 favicon 动画，以下内容对我有用：

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 7

这仅适用于Firefox（据我所知）。

主要浏览器现在支持SVG favicons。而且，SVG 可以使用SMIL进行动画处理。

因此，作为 GIF 的替代品，您可以使用 SVG favicon 并获得它的其他好处。
有关如何使用 SVG favicons 的详细答案，请参阅这篇文章。

例如，这是我的动画 SVG 徽标的代码（可以用作 favicon）：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="280" height="260" version="1.1" viewBox="0 0 280 260" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="grad" x1="140" x2="140" y1="260" gradientUnits="userSpaceOnUse">
    <stop stop-color="#ffa00f" offset="0"/>
    <stop stop-color="#ffbe0f" offset="1"/>
  </linearGradient>
  <path d="m15 150c6.3913 2.885 20.753 8.8719 30 25 20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70c9.2467-16.128 23.609-22.115 30-25" fill="none" stroke="#aaa" stroke-linecap="round" stroke-width="30"/>
  <path d="m15 150c6.3913 2.885 20.753 8.8719 30 25 20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70c9.2467-16.128 23.609-22.115 30-25" fill="none" stroke="url(#grad)" stroke-linecap="round" stroke-width="30" stroke-dashoffset="1374" stroke-dasharray="1374">
    <animate id="anim1" attributeName="stroke-dashoffset" from="1374" to="0" dur="4s" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines=".42,0,.58,1" begin="0s; anim2.end"/>
    <animate id="anim2" attributeName="stroke-dashoffset" from="2748" to="1374" dur="4s" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines=".42,0,.58,1" begin="anim1.end + 8s"/>
  </path>
</svg>

这是结果：