找我們做網站
↑
Resources · 插圖與圖示素材

favicon.zip 免費網站圖標產生器:一次產出各尺寸 favicon

插圖與圖示素材發布 2023.12.06更新 2026.10.02閱讀約 4 分鐘
favicon.zip 免費網站圖標產生器:一次產出各尺寸 favicon

重點整理
favicon.zip 可以一次產出網站需要的各種 favicon:上傳正方形 logo 圖片,按 Generate 就會下載包含各尺寸圖檔與 HTML 程式碼的 zip 檔。在設定中還能加產 .ico、Chrome/Android 圖示與 webmanifest、Apple touch 圖示等。

Favorite icon 中文又稱網站標誌,通常顯示於柳覽器的網址列、分頁標籤或是書籤列作為網站視覺畫的代表,尤其在開啟多個分頁時可以讓使用者快速辨別網站的重要工具,因此設定網站標誌算是做網站的基本功,今天就要跟大家介紹一款可以快速產出多種網站標誌尺寸的免費線上工具 – 「 favicon.zip 」!

favicon.zip

favicon.zip 是什麼

「 favicon.zip 」是一款非常實用的免費線上工具,祝要是幫助使用者快速生產各種尺寸、格式的網站標誌圖檔,使用者只需將 正方形 logo 圖片上傳至網站即可一件快速產出並自動下載的壓縮檔(.zip),最貼心的是 favicon.zip 還會提供相關程式碼給使用者。

what is favicon|鵠學苑
what is favicon|鵠學苑

favicon.zip 使用教學

第一步:開啟 favicon.zip 網站。

第二步:將 正方形 logo 圖片上傳至網站。

favicon|step2|鵠學苑
favicon|step2|鵠學苑

第三步:按下「 Generate 」,即會生成各種尺寸及相關程式碼的壓縮檔。

favicon|step3|鵠學苑
favicon|step3|鵠學苑

第四步:在生產前點選右上角「設定」按鈕,可以開啟更多功能,如:

含一個 48×48 的 .ico 檔案。
包含一個 64×64 的 .ico 檔案。
產生 Chrome/Android 圖片和 webmanifest 檔案。
產生舊式的 Apple touch 圖片。
產生 Microsoft Windows 和 IE 特殊磚圖片。

favicon|step4|鵠學苑
favicon|step4|鵠學苑

 

favicon 換了卻沒更新怎麼辦?

瀏覽器會長時間快取 favicon,換圖後看到舊圖是常見狀況,可以依序檢查:

  1. 用無痕視窗開啟網站,看看是不是已經變成新圖。
  2. 清除網站的快取外掛與 CDN 快取,確認 HTML 中引用的是新檔案。
  3. 在 favicon 的網址後面加上版本參數,例如 favicon.ico?v=2,強迫瀏覽器重新下載。
  4. Google 搜尋結果中的網站圖示要等 Google 重新檢索後才會更新,通常需要一段時間。

常見問題

favicon 需要哪些尺寸?

常見組合是 favicon.ico 或 32×32 PNG(分頁用)、180×180 的 Apple touch icon(iPhone 加到主畫面用),以及 192×192、512×512 兩種給 Android 與 webmanifest 使用。favicon.zip 可以一次產生這些檔案。

favicon 要怎麼製作才清楚?

準備一張正方形、背景單純的 logo 圖檔,最好是 512×512 以上。favicon 顯示得很小,文字太多或線條太細都會糊掉,建議只用 logo 的圖形或第一個字,並確認在淺色與深色分頁列上都看得清楚。

WordPress 要在哪裡設定 favicon?

WordPress 稱為「網站圖示」,傳統主題在「外觀 → 自訂 → 網站識別」上傳,區塊主題則在網站編輯器的網站標誌區塊設定中。WordPress 會自動產生各種尺寸,建議上傳 512×512 以上的正方形圖片。

結語

每次在設定網站標誌的前期種要花費許多時間在製作多個尺寸圖片嗎?有了「 favicon.zip 」就可以一件搞定!不只可以快速擁有多種尺寸的圖檔還會提供相關程式碼給使用者,是一個可以幫助網站是作者及開發者的免費線上工具。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。