21

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

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

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

來源

2009-12-03 02:27:16

+0

是否有可能讓.gif文件只有一次循環？ – 2017-08-14 14:28:43

+0

是不是可以通過javascript手動更改圖標？如果是這樣的話，我們不能通過一個由框架自定義構建的動畫的乏味框架來動畫圖標嗎？ – Jacob 2017-12-28 20:08:14

15

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

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

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

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

來源

2009-12-03 03:22:20 teapot7

+0

在Chrome中也適合我。 – TheSatinKnight 2017-05-09 06:16:50

-4

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

來源

2009-12-03 19:36:56 Phil

+3

瀏覽器對'/ favicon.ico'進行自動請求，但不是'/ favicon.gif'。 – 2016-04-07 16:09:53

6

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

又見

來源

2016-04-08 01:14:20

如何動畫favicon？

回答

Firefox

其他瀏覽器

又見

如何動畫favicon？

回答

Firefox

其他瀏覽器

又見

相關問題