這個 Stack Exchange 網站如何擁有動畫圖示?

這個 Stack Exchange 網站如何擁有動畫圖示?

昨天我在瀏覽https://stackexchange.com並注意到所有 Stack Exchange 的列表有一個動畫圖示:

在此輸入影像描述

這怎麼可能?我以為網站圖示是靜態 ICO 文件,無法動畫?

答案1

這就是臭名昭著的錯誤 111373它去年贏得了投票權,我預計再過幾年就會為它買飲料。

答案2

事實證明,動畫圖標實際上是可能的,並且一些網站有它們:請參閱如何禁用動畫圖示?

但這個特殊實例並不是 Stack Exchange 網站引起的;而是由 Stack Exchange 網站引起的。事實證明我有該頁面的使用者腳本暴力猴子,它(在後台)執行 HTTP 呼叫幫助中心清單中的每個網站。不知何故(我不知道確切的細節)這些網站的圖標也會被加載並應用於 Firefox 選項卡,從而產生動畫。最後一次呼叫是 Stack Overflow,以便圖示保持最終狀態。

如果您想親自體驗,可以安裝 Stack Exchange 最受歡迎的使用者腳本:全域標誌摘要– 它也顯示了這種行為。我不太確定這在哪些設定(使用者腳本管理器/瀏覽器/作業系統)中有效,但我在 macOS 10.14.6 上的 Firefox 69.0.1 中執行 Violentmonkey v2.11.2。

答案3

網站圖示可以使用 JavaScript 進行動畫處理。

我最喜歡的例子:http://www.p01.org/defender_of_the_favicon/

這是一個使用 16x16px 圖示作為顯示的可玩遊戲。

答案4

對於大多數瀏覽器來說,favicon 是靜態圖像文件,但網站可以利用 JavaScript 來修改目前顯示的 favicon,從而有效地將其動畫化。 Firefox 還允許 GIF 類型的網站圖示並相應地播放動畫。

這個堆疊溢位線程用於動畫圖示的各種實作。

相關內容