如何制作动态网站图标？

Question

如何制作类似的动画图标？

它似乎只在Firefox中起作用。

- tonyf

Answer 1

虽然目前只有Firefox支持此功能，但希望未来其他浏览器也能支持。要实现此效果，您需要将gif上传到您的服务器，然后将下面的行添加到页面的head部分：

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

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

- Chris Van Opstal

---

能否让 .gif 只循环一次？ - Gerlof Leuhof

能否使用JavaScript手动更改图标？如果可以的话，我们是否可以通过繁琐的逐帧自定义动画来实现图标的动态效果？ - Jacob

就此而言，在 Safari 12 中（在偏好设置中设置“显示选项卡图标”），它也可以正常工作。 - Steve

网站上的动画网站图标在我的浏览器（Firefox 116）上无法正常工作。 - hf02

Answer 2

几乎肯定不是你想要的，但有些人已经通过客户端JavaScript编程方式写入到网站图标(favicon)。下面的URL显示了旧游戏“Defender”在网站图标中的播放：

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

这适用于Firefox、Opera和Safari，但至少在旧版IE中无法使用。我不确定最新的IE可能具备什么能力。

在此页面上执行“查看源代码”将带来相当有趣的阅读体验。

- teapot7

---

在 Chrome 中对我也有效。 - TheSatinKnight

浏览器有限制，不允许在标签页未被聚焦时运行此动画。解决方案是使用Web Worker实现计时器。我在这个小库https://www.npmjs.com/package/favloader中实现了这一点，您可以查看源代码。它只是使用Web Worker重新创建的setInterval函数+ canvas动画 + 在favicon链接元素中交换canvas DataURI。 - jcubic

Answer 3

火狐浏览器

火狐浏览器支持动态网站图标。只需在<link rel="icon">标签中添加指向GIF图片的链接即可：

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

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

其他浏览器

在其他浏览器中，您可以使用JavaScript来使收藏夹图标动画。您只需从GIF中提取单个帧并在GIF帧更改时每次更改<link rel="favicon"> 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网站图标。

还可以查看favico.js库。

另请参阅

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

- Michał Perłakowski

Answer 4

在 GitHub 上有仓库演示如何实现此功能。

例如，它们在画布上绘制，然后执行 canvas.toDataURL('image/png')，然后将 <link> 的 href 设置为该数据 URL。 http://lab.ejci.net/favico.js/example-simple/

- Lance

Answer 5

为了在几乎所有浏览器中都能实现网站图标动画效果，以下方法适用：

1. Download an image of each frame of the gif.

2. Link the first image as an icon with an id:

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

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

4. Create a loop when the window loads:

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

这种方法只是为了确保更多的浏览器能够看到动画，因为其他方法只在某些浏览器和浏览器版本中起作用。

- Malmadork

---

现在回头看，可能有更好的方法通过函数来循环它，但是这种和类似的方法仍然可以在所有浏览器中工作。 - Malmadork

Answer 6

我已经创建了一个库来实现网站图标的动画效果，你可以在这里找到它。默认情况下，它使用canvas生成加载动画，但是从0.3.0版本开始，它也支持gif动画，以便于那些不支持gif格式的浏览器。

API非常简单。

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

从版本0.4.0开始，该库允许创建自定义动画，使用回调函数在画布上生成帧：

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

用户将能够绘制单帧。

注意：如要实现此类功能，请考虑以下事项：

• 在标签页不活动时使用Web Worker进行动画处理，
• 不要使用requestAnimationFrame，在MacOSX / Chrome中即使在Web Worker中也会停止执行。

- jcubic

Answer 7

据我所知，这仅适用于 Firefox 浏览器。

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

因此，作为 GIF 的替代方案，您可以使用 SVG favicon 并获得其它好处。
有关如何使用 SVG favicon 的详细答案，请参考此帖子。

例如，这是我的动态 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>

这是结果:

- Mahozad