動態 favicon 與靜態 ICO 備用圖示

動態 favicon 屬於網站行為，必須在預計支援的瀏覽器中確認。ImgConvert 可從 GIF 的第一影格製作靜態 ICO 備用圖示。工具沒有保留動畫的選項，也不會產生動態 ICO。

什麼是動態 favicon？

favicon 是「favorite icon」的縮寫，指瀏覽器分頁、書籤和網址列中顯示的小圖示。動態 favicon 會循環播放多個影格，讓瀏覽器分頁中的圖示呈現動態效果。

常見用途包括：

• 通知提示 — 以脈動或閃爍提示新訊息
• 載入動畫 — 在內容處理時顯示旋轉圖示
• 品牌表現 — 以細微的標誌動畫傳達品牌個性
• 季節活動 — 為節日或促銷活動暫時使用動態圖示

準備合適的第一影格

請選擇簡單的圖案，確保縮小至 16×16 或 32×32 時仍可辨識。如果 GIF 以空白影格或淡入效果開頭，請先在圖片編輯器中選擇更合適的靜態畫面。轉換工具不提供影格選擇功能。

動畫設計原則

以下建議適合作為在其他編輯器中設計動畫的起點，並非 ICO 轉換工具的限制或設定。請依實際動作調整時間，避免不必要的閃爍。

保持簡單

好的動態 favicon 應適度運用動畫。在 16×16 到 32×32 像素的尺寸下，複雜設計容易造成視覺干擾：

• 多數效果最多使用 2-4 個影格
• 簡單動作 — 脈動、閃爍、旋轉或滑動
• 每個影格都要有清楚的輪廓
• 放慢節奏 — 每個影格週期至少 500ms

依動畫類型安排時間

第一影格原則

轉換工具會使用第一影格輸出靜態 ICO。不論另外實作的動畫是否播放，這個影格都必須能獨立使用：

• 不需其他資訊也能辨識品牌標誌
• 在 16×16 和 32×32 像素下都清楚可見
• 與淺色、深色瀏覽器介面都有足夠對比
• 避免文字（在 favicon 尺寸下難以閱讀）

逐步製作流程

以下建議適合作為在其他編輯器中設計動畫的起點，並非 ICO 轉換工具的限制或設定。請依實際動作調整時間，避免不必要的閃爍。

步驟 1：設計影格

為動畫建立 2-4 個不同的影格：

通知脈動效果：

• 影格 1：一般圖示（基本狀態）
• 影格 2：帶有輕微光暈或略微放大的圖示
• 影格 3：回到一般狀態（讓循環更流暢）

載入動畫：

• 影格 1：圖示位於 12 點鐘方向
• 影格 2：圖示位於 3 點鐘方向
• 影格 3：圖示位於 6 點鐘方向
• 影格 4：圖示位於 9 點鐘方向

步驟 2：匯出個別影格

將每個影格匯出為 32×32 像素的 PNG：

• 需要透明影格時，請匯出具有 Alpha 色版的 PNG。
• 依需求保留透明背景
• 以每個影格小於 5KB 為目標

步驟 3：組合 GIF

將影格組合成 GIF 動畫：

製作靜態 ICO 套件

1. 開啟 GIF 轉 ICO，選擇一個不超過 20 MB 的 GIF。
2. 選擇需要的尺寸：16、32、48、64、128 或 256 px。預設勾選 32、64 和 128。
3. 轉換、下載並解壓縮 icons.zip。
4. 使用個別圖示，或使用內含所有已選尺寸的 favicon.ico。這些是同一張靜態圖片的不同尺寸版本，並非動畫影格。

長方形圖片會等比例放入正方形，周圍以透明留白補足。原始圖片中的不透明背景仍會保留。若需要包含 PNG 圖示與資訊清單的網站套件，請使用 favicon 產生器。

將備用圖示安裝到網站

將解壓縮後的檔案部署至網站根目錄，再於頁面的 head 區塊引用：

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

請依部署方式調整路徑。轉換工具不會安裝檔案或修改網站。MDN 的 icon 參考文件說明了這項 HTML 宣告。

如果 favicon 必須呈現動畫

請保留原始動畫。將動畫圖片用作 favicon，或使用網站 JavaScript 切換圖示影格，都是需要另外實作的工作。圖片在檢視器中會動，不代表在瀏覽器分頁、書籤或捷徑中也會動。請測試所有需要支援的瀏覽器，並提供清楚可辨識的靜態備用圖示。

網站 JavaScript 範例

網站開發者可嘗試變更現有 favicon 連結的 URL。這是獨立的網站程式碼；在這裡上傳 GIF，不會將它加入網站或安裝動畫。請為每個影格保留靜態檔案，並從合適的靜態圖示開始。

下方範例會在頁面可見時，每隔 500 ms 切換兩個 PNG URL。頁面隱藏，或使用者設定減少動態效果時，就會停止。這個範例示範更新機制，不保證所有瀏覽器分頁、書籤或作業系統捷徑都會播放動畫。正式採用前，請在實際使用環境中測試。

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

何時適合或不適合使用動態 favicon？

適合的使用情境

不適合的使用情境

效能最佳化

請減少影格數量，在通知已不需要提醒時停止動畫，並比較啟用與停用動畫時的頁面表現。計時器跑得更快，不一定能帶來更好的 favicon。請避免為同一個圖示執行多個計時器。若整合至元件，請在元件卸載時移除事件監聽器並停止計時器。上述範例是獨立頁面的程式碼。

MDN 的 Page Visibility API 指南說明了此處使用的可見性訊號。視覺動畫應搭配符合無障礙需求的頁面狀態訊息，因為單靠圖示可能不會被看見，也可能不會被輔助技術讀出。

檢查結果

• 開啟已部署的圖示 URL，檢查小尺寸的外觀。
• 如果仍顯示舊圖示，請檢查現有圖示宣告與瀏覽器快取。
• 將動畫測試與靜態 ICO 下載結果分開檢查。

請檢查實際支援的每一種瀏覽器與裝置，包括全新的瀏覽階段和已使用快取的瀏覽階段。測試第一影格、另外實作的動態效果、減少動態效果偏好，以及從隱藏分頁切回後的行為。請在淺色與深色瀏覽器介面上，檢查 16×16 和 32×32 的圖案。如果動畫無法穩定運作，請保留靜態備用圖示。檔案大小目標是專案自行設定的限制，並非所有瀏覽器共通的上限。

常見問題

選擇多個 ICO 尺寸，能保留 GIF 動畫嗎？

不能。所有尺寸都來自第一影格，工具沒有「保留動畫」開關。

可以在這裡選擇其他影格嗎？

不行。請先用其他工具準備需要的靜態畫面；若儲存為 PNG，再使用 PNG 轉 ICO。

為什麼仍顯示舊的 favicon？

請確認已部署的檔案 URL 能正常載入，檢查是否有互相衝突的圖示宣告，並比較全新與已使用快取的瀏覽階段。分頁圖示、書籤和已安裝的捷徑可能使用不同的素材或快取。在某個頁面中更新連結，不會取代所有已儲存的圖示。

只靠 CSS 就能讓分頁圖示產生動畫嗎？

網頁內圖片的 CSS 動畫，不會讓瀏覽器的分頁圖示產生動畫。直接連結動畫檔案，或以 JavaScript 嘗試切換 URL，都應視為獨立的實作方式，並測試所需的瀏覽器行為。

應該使用多少動態效果？

以足以傳達預期狀態為原則。有時靜態徽章能表達得更清楚。請避免快速閃爍，保留可辨識的靜態畫面，並檢查減少動態效果的行為。請以實際的小尺寸測試時間安排，而非只根據大型預覽判斷。