UltKit

SVG 轉 ICO 轉換器

用 SVG 製作 favicon 是最理想的做法:每種圖示尺寸都直接由向量重新繪製,而不是從大張點陣圖縮小,所以 16 px 版本也能在像素格線允許的範圍內保持清晰。

圖片轉換器

或將JPG, JPEG, JPE … 檔案拖曳到這裡 ·

每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除

輸出

檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。

使用方式

  1. 1

    上傳 SVG Logo

    請使用標誌或字母組合圖案,不要用完整的文字商標。正方形的 viewBox 轉出來的效果最乾淨。

  2. 2

    保留所有圖示尺寸

    圖示尺寸預設為「全部尺寸(16–256)」,會把所有解析度打包進同一個 .ico。只有在程式明確要求單一尺寸時,才需要選擇單一尺寸。

  3. 3

    按下「轉換為 ICO」

    將檔案儲存為 favicon.ico,放在網站的根目錄,或讓 Windows 捷徑指向它。

解答

如何把 SVG 轉成 ICO 做為 favicon?

上傳 SVG,將圖示尺寸保持為「全部尺寸(16–256)」,然後按下轉換為 ICO。你會得到一個 .ico 檔案,內含從向量繪製出的所有解析度,並保留透明度。

SVG 轉 ICO 轉換器:為什麼向量是最佳來源

.ico 格式源自早期的 Windows 版本,而 favicon.ico 的慣例則始於 1999 年的 Internet Explorer 5,它會在你加入書籤的每個網站根目錄尋找這個檔名的檔案。ICO 是一種小型容器:內有一份目錄,每個項目都是獨立的正方形點陣圖,因此一個檔案可以同時存放 16 px 的分頁圖示和 256 px 的桌面圖示。Windows Vista 把上限提高到 256 × 256,並允許這些大尺寸項目以 PNG 儲存。

由於每個項目都是獨立的點陣圖,圖示的品質取決於各尺寸的產生方式。從 PNG 轉換時,每個尺寸都是同一批像素縮小而來;從 SVG 轉換時,每個尺寸都是重新繪製路徑,並針對該格線計算消除鋸齒。在 16 × 16 px 時,標誌只有 256 個像素可用,這種差異清晰可見。

1:1

16 × 16 px

16 × 16

瀏覽器分頁、書籤與歷史記錄清單。

1:1

32 × 32 px

32 × 32

高像素密度螢幕的分頁、Windows 工作列捷徑。

1:1

64 × 64 px

64 × 64

縮放後的桌面檢視與已釘選的項目。

1:1

128 × 128 px

128 × 128

檔案管理員中的大型預覽。

1:1

256 × 256 px

256 × 256

ICO 中最大的項目;檔案總管的特大圖示。

SVG

可縮放向量圖形(SVG)

SVG 是 W3C 於 2001 年標準化、以 XML 為基礎的向量格式。它描述的是形狀、路徑和文字而非像素,因此任何尺寸都保持清晰,用於標誌和圖示時檔案通常非常小。它支援透明度、CSS 樣式、指令碼和動畫,所有瀏覽器都能原生顯示。SVG 不適合照片,複雜的插圖也可能繪製得很慢。Illustrator、Inkscape、Figma 和瀏覽器都能開啟與編輯。

壓縮方式
–
透明度
支援
動畫
支援
推出年份
2001 · W3C
SVG 轉檔工具

ICO

Windows 圖示

ICO 是 Microsoft 的圖示格式,用於 Windows 程式圖示和網站 favicon。單一 .ico 檔可包含多種尺寸的影像,例如 16×16、32×32、48×48 和 256×256 像素,讓系統挑選最合適的尺寸。每張影像可儲存為點陣圖或 PNG 資料,並支援完整的 Alpha 透明度。ICO 不適合用於照片或大型圖像。瀏覽器、Windows 和多數圖示編輯器都能讀取。

壓縮方式
無損
透明度
支援
動畫
不支援
推出年份
Microsoft
ICO 轉檔工具

人們把 SVG 轉成 ICO,是因為標誌原本是向量檔,但網站根目錄、Windows 捷徑或桌面應用程式仍然需要一個包含多種點陣圖尺寸的 .ico 檔案。

SVG 轉 ICO 之前,先準備好 SVG

建議避免
將 viewBox 設為正方形,例如 0 0 512 512。不要依賴在 32 px 以下就會消失的極細線條。
預留一點邊距,讓圖案不要碰到圖示邊緣。不要保留寬幅的文字商標,否則會縮成一道細細的模糊痕跡。
將文字轉為外框,字型才不會改變。不要在 SVG 內參照外部圖片或網頁字型。
使用符號或縮寫字母,不要用完整名稱。除非你希望深色分頁上也有白底,否則不要在標誌後面加白色矩形。

轉換器只會繪製 SVG 所描述的內容,未內嵌的連結資源和字型無法被取得。Figma、Illustrator 和 Inkscape 等設計工具都能把文字匯出為路徑;這麼做之後,字母在任何地方都會與你的品牌一致。

.ico 完成後,請再準備一個 180 px 的 PNG 作為 Apple 觸控圖示,並提供 SVG 本身給支援向量 favicon 的瀏覽器;SVG 轉 PNG可以產生任意尺寸的 PNG。如果你的來源是點陣圖標誌,PNG 轉 ICO可以從像素處理同樣的工作。

SVG 轉 ICO:常見問題

為什麼要用 SVG 轉 ICO 轉換器,而不是從 PNG 開始?

PNG 必須針對每個圖示尺寸縮小,而縮小會讓邊緣變模糊。SVG 則是直接以 16、32、64、128 和 256 px 繪製,每個尺寸的邊緣都會貼合自己的像素格線,因此更銳利。

網站已有 SVG 圖示,瀏覽器還需要 favicon.ico 嗎?

Chrome 和 Firefox 會讀取以 link 標籤宣告的 SVG favicon,但許多瀏覽器、RSS 閱讀器和爬蟲預設仍會向網站根目錄要求 /favicon.ico。兩種都提供就能全部涵蓋。

如果 SVG 不是正方形會怎樣?

圖示的欄位是正方形,寬幅的標誌不是留下大片空白,就是顯得很小。請先把 viewBox 改成寬高相等,或是匯出 PNG 後,用裁切圖片工具裁出正方形版本。

ICO 會保留透明背景嗎?

可以。ICO 支援 Alpha 色版,SVG 中沒有填色的區域會保持透明,圖示在淺色與深色的瀏覽器分頁上都能乾淨呈現。

可以把 SVG 轉成 ICO 當作 Windows 程式或資料夾圖示嗎?

可以,同一個檔案就能使用。Windows 在檔案總管的大圖示與特大圖示檢視會讀取 256 px 的影像,清單與工作列則使用較小的項目。

為什麼圖示在 16 px 時看起來空空的?

細線和小字在這個尺寸下會消失。在 512 單位的畫板中,2 單位的線條放進 16 px 的圖示,寬度遠小於一個像素。請加粗線條,或改用較簡單的圖案作為 favicon。