HTML浏览器添加书签图标,html-如何为收藏夹图标添加动画？

火狐浏览器

Firefox支持动画图标。 只需在标签中添加指向GIF的链接：

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

其它浏览器

在其他浏览器中，您可以使用JavaScript为收藏夹动画。 您只需要从GIF中提取单个帧，并在每次GIF帧更改时更改2979984638401315315840 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 ,

// so we have to add the favicon to the parent window

window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF 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库。

也可以看看

如何为网站添加浏览器标签图标(图标)？

动态更改网站图标