如何動畫favicon？

Question

如何動畫這樣的favicon？

看來只有在Firefox中工作。

Answer 1

雖然目前只支持FireFox，但其他瀏覽器有望在未來支持。爲了達到效果，你需要將GIF上傳到服務器，然後將下面一行添加到您的網頁的head部分：

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

看看AnimatedFavIcon.com更多的幫助和資源。

Answer 2

幾乎肯定不是你要找的東西，但有些人甚至已經編程寫入客戶端JavaScript中的圖標。以下URL顯示舊的視頻遊戲「後衛」的圖標播放：

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

這在Firefox，Opera和Safari，但不是至少在舊版本的IE。我不確定最新的IE可能會有什麼功能。

在這個頁面上做一個'查看源代碼'使得閱讀起來非常有趣。

Answer 3

重命名你的GIF動畫，以便favicon.gif並把它放在你有你的index.html（或index.php文件...或類似）（或的public_html如果你有更多的網站的子目錄中）在服務器上，它會自動工作。

Answer 4

Firefox

Firefox支持動畫圖標。只需添加一個鏈接到GIF在<link rel="icon">標籤：

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

您還可以使用動畫ICO文件。在這種情況下，不支持動畫圖標的瀏覽器將僅顯示第一幀。

其他瀏覽器

在其他瀏覽器，你可以使用動畫JavaScript中的圖標。您只需從GIF中提取單幀，並在每次GIF幀更改時更改<link rel="favicon"> src。參見例如（JS Fiddle demo）此代碼：

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圖書館。

又見

• How to add a browser tab icon (favicon) for a website?
• Changing website favicon dynamically