ImgConvert

Favicon 產生器

將一張圖片轉成 ZIP,內含多尺寸 ICO、五個 PNG 圖示與網站資訊清單(manifest)。請參考下方安裝範例,將這些檔案連結至您的網站。

將圖片拖曳至此,或選擇檔案(PNG、JPG、SVG、WebP、GIF)。建議尺寸:512×512px 以上。

ZIP 內容

  • • 一個包含 16、32 與 48 px 尺寸的 ICO
  • • 五個供瀏覽器與主畫面使用的 PNG 圖示
  • • 可依網站需求調整的網站資訊清單(manifest)

Favicon 套件中的檔案

下載檔案為 favicon-package.zip,內含七個檔案。HTML 會在本文中以安裝範例呈現,不包含在 ZIP 中。

檔案尺寸或內容用途
favicon.ico一個檔案包含 16×16、32×32 與 48×48多尺寸網站圖示。
favicon-16x16.png16×16小型瀏覽器圖示。
favicon-32x32.png32×32較大的瀏覽器圖示。
apple-touch-icon.png180×180供 Apple 主畫面圖示引用。
android-chrome-192x192.png192×192網站資訊清單引用的圖示。
android-chrome-512x512.png512×512網站資訊清單引用的較大圖示。
manifest.json網站名稱、顏色與兩個圖示參照供您依網站需求檢查與調整的初始資訊清單。

輸入格式:PNG、JPG/JPEG、WebP、GIF 或 SVG。輸出為靜態 ICO 與 PNG 圖片;上傳 SVG 不會產生 SVG favicon。

產生並安裝 Favicon 檔案

1

選擇容易辨識的原圖

請上傳簡單的圖片。至少 512×512 像素的正方形原圖適合最大的 PNG 輸出;使用更大的圖片也無法改善不清楚的設計。

2

產生並下載 ZIP

點選「產生 Favicon 套件」,並下載完成的 ZIP。將檔案加入網站前,請先解壓縮。

3

檢查資訊清單並部署檔案

請視需要修改 manifest.json 中的預設網站名稱與顏色。將檔案放到網站可公開存取的網址;若使用子資料夾,請更新路徑。

4

加入 HTML 參照並確認

請將下方範例加入頁面的 head 區段。確認圖示與資訊清單網址可載入後,再到瀏覽器中檢查圖示。

將圖示加入網站

此範例假設檔案放在網站根目錄。請將這些參照加入頁面的 head,並依實際部署方式調整路徑。

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">

發布檔案前,請檢查以下細節:

檢查項目操作方式
公開檔案路徑開頭的斜線代表網站根目錄。若放在子資料夾,請同時更新 HTML 的 href 值與 manifest.json 中圖示的 src 值。
資訊清單預設值產生的 name 與 short_name 為 My Website;theme_color 與 background_color 為 #ffffff。下載後請檢查並調整。這些值不會改變圖示圖片的顏色。
現有網站設定請檢查佈景主題或框架是否有其他圖示宣告,避免新設定與舊 favicon 參照並存。

包含圖示的資訊清單不等於完整、可安裝或可離線使用的網頁應用程式。此產生器不提供 service worker,也不保證每種裝置都能安裝。

讓小尺寸圖示仍清楚可辨

🔎
檢查 16×16 的結果

小文字與細輪廓可能消失。建議使用簡單標誌、清楚的對比,並在主體周圍保留足夠空間。

↔
檢查形狀與留白

非正方形原圖會縮放至正方形畫布內,並以透明留白補足。尺寸較小的原圖可能會被放大。若需要精確構圖,請使用事先準備好的正方形圖片。

依需求選擇輸出套件

此頁面會從現有圖片建立網站 favicon 檔案,不是 Logo 繪製工具。

只需要一個 ICO 檔案?

若只需將 PNG 轉成 ICO,不需要網站套件,請使用 PNG 轉 ICO。

正在開發原生行動 App?

請使用 App 圖示產生器 取得原生 iOS/Android 圖片素材。這些檔案的用途與網站 favicon 不同。

圖片會上傳至伺服器處理。ZIP 準備完成後請下載;暫存檔案會依服務的清理流程處理。

Favicon 設定常見問題

不包含。SVG 是可接受的原始格式,但套件內容為點陣 PNG 檔案與一個 ICO,不會建立向量或動畫 favicon。

請先確認已部署檔案的網址與頁面的圖示宣告。瀏覽器可能會快取 favicon;確認網站已指向新檔案後,請用新的瀏覽器工作階段測試。

目前的表單只能選擇圖片。請在下載的資訊清單中,依網站需求修改 name、short_name、theme_color 與 background_color 欄位,並讓 HTML 的 theme-color 值保持一致。

不能。它提供圖示檔案與初始資訊清單。安裝與離線功能需要額外的網站設定;套件不會自動加入這些功能。

建立網站的 Favicon 檔案

選擇圖片、產生 ZIP,並檢查安裝路徑。