圖片轉 ICO 與全平台圖示產生器 一張圖一鍵打包網站 Favicon.ico 與 iOS/Android/桌面端應用程式圖示

上傳一張高解析度 PNG 或 JPG 正方形 Logo,即可在瀏覽器本機自動裁切並打包多尺寸二進位 favicon.ico、HTML <head> 引入程式碼,以及符合 iOS、Android、macOS 與 Windows 規範的全套應用程式圖示。

100% 瀏覽器本機處理 — 檔案絕不上傳伺服器,保障絕對隱私

將您的 PNG 或 JPG 檔案拖放到此處

或點擊選擇檔案

為獲得最佳效果,請上傳至少 512x512 像素的方形圖片。

精選實測效果展示

真實產生的圖示包結構與輸出成果展示

僅需輸入一張 1024×1024 像素主圖,即可秒級自動產生以下三大場景的完整標準工程套件:

網站與 PWA 專用包 #01

完整網站 Favicon.zip + HTML <head> 引入程式碼

原始輸入
brand-mark.png • 1024×1024 px • 32 位元透明背景 PNG
輸出結果
favicon.ico (內含 16/32/48px) + apple-touch-icon.png (180×180) + Android 192/512px + HTML 標籤

產生真正的複合二進位 favicon.ico 檔案,同時配齊 iOS Safari 加入主畫面圖示、Android Chrome PWA 圖示,並提供一鍵複製的 HTML <link> 標籤程式碼。

iOS 與 Android 原生包 #02

Xcode .appiconset 與 Android Studio Mipmap 目錄包

原始輸入
saas-app-icon.png • 1024×1024 px • 不透明底色正方形 App 圖示
輸出結果
iOS AppIcon.appiconset (20px–1024px @1x/@2x/@3x) + Android mipmap-mdpi 至 xxxhdpi 全套 PNG

徹底告別在 Photoshop 或 Figma 中手動匯出二十幾個尺寸的繁瑣步驟,自動依官方命名規範產生 iPhone、iPad、App Store (1024×1024) 及 Android 各螢幕密度資料夾。

Windows 與 macOS 桌面應用 #03

Windows .ICO 與 macOS .ICNS 桌面軟體圖示

原始輸入
electron-tool-logo.png • 1024×1024 px • 高對比透明背景圖形 Logo
輸出結果
Windows 多解析度 .ico (最高 256×256 px) + macOS Retina .icns 容器檔

專為 Electron、Tauri、Flutter 及 C#/.NET 桌面開發者打造,無需執行命令列指令即可一鍵產生高畫質工作列圖示、桌面捷徑與 macOS Dock 圖示。

一、解決什麼具體問題

這個圖示產生器能解決什麼具體問題?

現代網站與跨平台軟體早已不再只使用單一 16×16 的小圖示。各大瀏覽器、iOS、Android、Windows 與 macOS 要求提供超過 25 種不同像素尺寸與二進位封裝格式。

告別直接改副檔名的「假 ICO」,產生真正的多層二進位 .ico

把 .png 檔案直接重新命名為 .ico 會導致部分瀏覽器與 Windows 檔案總管無法辨識或顯示模糊。本工具將 16×16、32×32、48×48 三個圖層依標準二進位標頭封裝進同一個 favicon.ico 中。

省去 30 分鐘手動切圖與命名,一鍵打包 25+ 種全平台尺寸

手動匯出 iOS 的 @1x/@2x/@3x 與 Android 的 mdpi 至 xxxhdpi 資料夾極易遺漏出錯。只需上傳一張 1024×1024 母版圖,3 秒內自動產生依平台分類的 ZIP 壓縮檔。

100% 瀏覽器本機 JSZip 打包,未公開的新產品 Logo 零外洩

無論是新創專案的品牌 Logo 或企業內部系統的應用程式圖示,所有影像縮放、二進位編碼與 ZIP 封裝均在本機瀏覽器記憶體中完成,絕不上傳至任何外部伺服器。

二、需要準備什麼輸入

使用前需要準備什麼輸入圖片?

為了確保從 1024×1024 的應用程式商店大圖到 16×16 的瀏覽器分頁小圖示都清晰銳利,請依以下規範準備來源圖片:

1:1 正方形比例圖片(強烈推薦 1024×1024 像素)

請準備長寬完全相等的正方形圖片,解析度建議不低於 512×512 px(若需產生 iOS App Store 圖示則必須為 1024×1024 px)。若上傳非正方形或尺寸過小的圖片,工具會自動顯示提醒。

高畫質 PNG 或 JPG 格式(若原圖是 SVG 可先一鍵轉 PNG)

支援直接上傳 .png、.jpg、.jpeg 檔案。如果您的 Logo 目前是 .svg 向量格式,請先點擊頂部導覽列的「SVG 轉 PNG」匯出為 1024×1024 px 的高畫質 PNG,再拖入本工具。

圖形主體置中、線條醒目,避免包含細小文字標語

當圖示縮小到瀏覽器分頁列的 16×16 像素時,任何多字口號或極細線條都會糊成一團。建議僅保留核心圖形徽標或首字母縮寫,並在四周預留約 10% 的安全邊距。

依目標平台合理選擇透明背景或純色背景

網站 Favicon 與桌面軟體圖示非常適合使用透明背景 PNG;但蘋果 iOS 應用程式圖示不支援透明通道(透明區域會被系統強制填滿為純黑色),製作 iOS 圖示時請使用不透明實心背景。

三、具體操作步驟

具體操作步驟指南

1

1. 上傳正方形來源圖或點擊載入範例 Logo

將準備好的 PNG/JPG 圖片拖入藍色虛線上傳區,或點擊上方的「載入範例應用程式 Logo 測試」按鈕。左側預覽面板會立即顯示圖片效果並自動檢查像素尺寸是否符合建議。

2

2. 選擇產生「網站 Favicon 圖示包」或「應用程式 App 圖示包」

在右側面板點擊選擇您的目標類型:架設網站、部落格或電商網站請選擇「Favicon 網站圖示」;開發手機 App 或電腦桌面軟體請選擇「App 應用程式圖示」。

3

3. 勾選目標作業系統平台並點擊產生按鈕

若選擇了 App 圖示模式,可自由勾選 iOS (.appiconset)、Android (mipmap PNGs)、macOS (.icns) 與 Windows (.ico),接著點擊藍色的產生按鈕。

4

4. 下載打包好的 ZIP 壓縮檔並複製 HTML 引入程式碼

點擊下載按鈕儲存 Favicon.zip 或 App-Icons.zip。在網站圖示模式下,還可直接點擊程式碼區塊右上角的「Copy」按鈕,一鍵複製標準 HTML <head> 圖示引入標籤。

四、產生結果怎麼用

產生的圖示結果怎麼部署使用?

下載的 ZIP 壓縮檔已經依照各平台專案規範整理好資料夾結構,解壓縮即可直接投入使用:

部署至網站根目錄並貼上 HTML <head> 標籤

將 Favicon.zip 解壓縮後的所有檔案放入網站的靜態根目錄(如 Next.js/Vue 的 public 目錄或 WordPress 根目錄),並將產生面板中的 <link> 程式碼貼到網頁 <head> 標籤內即可生效。

直接拖入 Xcode 與 Android Studio 原生專案目錄

iOS 開發者可將解壓縮出的 .appiconset 資料夾直接拖入 Xcode 的 Assets.xcassets 中;Android 開發者可將 mipmap-* 資料夾直接合併覆蓋至 app/src/main/res/ 目錄。

設定 Electron、Tauri、Flutter 與桌面端封裝檔

在 electron-builder 或 tauri.conf.json 設定檔中,直接指向壓縮包內的 Windows .ico 與 macOS .icns 圖示路徑,即可完成安裝包與桌面捷徑設定。

五、哪些情況效果會不好(避坑指南)

哪些情況下產生的圖示效果會不好?(避坑指南)

在製作網站 Favicon 與應用程式圖示時,以下三個常見誤區最容易造成圖示變形或模糊:

上傳了長方形的橫版網站帶字 Logo(例如 600×150 px)

發生原因:

無論是瀏覽器分頁或手機桌面圖示,全部強制採用 1:1 正方形畫布。將扁長的橫幅 Logo 強行縮進 16×16 正方形中,圖形高度只剩 4 個像素,完全無法辨識。

解決方案:

上傳前請先裁切掉右側的長串品牌文字,僅擷取左側正方形的圖形標誌(Symbol/圖形徽標)並匯出為 1024×1024 正方形圖片。

產生的 iOS 圖示或 Apple Touch Icon 邊緣變成了難看的純黑底色

發生原因:

蘋果 iOS 系統規範不支援帶 Alpha 透明通道的應用程式圖示。如果您上傳的是圓角鏤空或全透明底的 PNG,iOS 系統會自動把透明區域全部填滿為純黑色(#000000)。

解決方案:

若需要製作 iOS 應用程式圖示或加入 iPhone 主畫面的圖示,請在設計軟體中為 Logo 鋪上一層純白或品牌色直角正方形背景後再匯出上傳。

原圖包含過多細碎線條,縮小到 16×16 像素時顯得模糊不清

發生原因:

將 1024×1024 的複雜插畫縮小 64 倍至 16×16 像素時,原本幾十像素寬的細節會被抗鋸齒演算法平均化到僅僅 1 個像素內,產生視覺模糊感。

解決方案:

優秀的 Favicon 應遵循「極簡高對比」原則:加粗核心線條、移除細小描邊與陰影,確保在 16×16 尺寸下依然輪廓分明。

六、與相關工具有什麼區別

圖片轉圖示工具與站內其他工具有什麼區別?

將本站的三個核心工具串聯起來,即可完成從向量原始檔到全平台圖示發布的完整流程:

比較維度 圖片轉圖示產生器(本工具) SVG 轉 PNG 轉換器 PNG 線上壓縮工具
核心功能定位 將單張母版圖一鍵切片並封裝為多尺寸 .ico、.icns 及平台目錄包 將無限縮放的 .svg 向量圖光柵化渲染為指定尺寸的高畫質透明 PNG 在不改變像素寬高的前提下,將 PNG 檔案位元組大小壓縮 50%–75%
支援輸入格式 .png、.jpg、.jpeg(強烈建議 1024×1024 px 正方形) .svg 向量檔案或直接貼上 XML 向量原始碼 .png 點陣圖檔案(24 位元 RGB / 32 位元 RGBA)
最終輸出成果 Favicon.zip(含 HTML 程式碼)或全平台 App-Icons.zip 自訂像素尺寸的單張高畫質 .png 圖片(支援 4K 與 300 DPI) 像素尺寸完全不變、檔案體積大幅縮小的 .png 圖片
標準協同工作流 第 2 步:將 1024×1024 的 PNG 一鍵打包為全套網站與 App 圖示 第 1 步:先把設計師給的向量 Logo.svg 轉為 1024×1024 像素 PNG 第 3 步:對需要單獨減重的大尺寸 PNG 圖示進行極限體積壓縮
七、常見問題怎麼處理

常見問題與故障排除 (FAQ)

我的 Logo 是 .svg 向量格式,怎麼用這個工具產生 favicon.ico?

非常簡單!請先點擊頁面頂部導覽列的「SVG 轉 PNG」工具,將輸出寬高設定為 1024×1024 像素並下載高畫質 PNG;接著回到本頁面將該 PNG 拖入,即可一鍵產生全套 favicon.ico 與應用程式圖示包。

產生的網站 Favicon.zip 壓縮檔裡具體包含哪些檔案?

壓縮檔內包含複合多尺寸的 favicon.ico(內嵌 16×16、32×32、48×48 圖層)、favicon-16x16.png、favicon-32x32.png、供蘋果裝置主畫面書籤使用的 apple-touch-icon.png (180×180),以及供 Android 與 PWA 使用的 192×192 和 512×512 PNG 圖示。

為什麼我已經把新的 favicon.ico 上傳到網站伺服器了,瀏覽器還是顯示舊圖示?

這是因為 Chrome、Safari 等瀏覽器對網站 Favicon 有極強的本機快取機制。您可以透過「無痕視窗」打開網站驗證,或是在 HTML 的引入連結後面加上版本號參數強制重新整理快取,例如:<link rel="icon" href="/favicon.ico?v=2">。

上傳未公開的新 App 圖示安全嗎?圖片會被儲存到伺服器嗎?

100% 安全。本工具的影像多尺寸縮放、ICO/ICNS 二進位標頭封裝以及 ZIP 壓縮包製作,全部透過瀏覽器本機 JavaScript 與 Canvas 完成,您的圖片資料全程不會離開您的電腦。

為什麼建議上傳 1024×1024 像素這麼大的圖片?

因為蘋果 App Store 應用程式商店圖示強制要求 1024×1024 px,macOS Retina 圖示也需要高達 512×512@2x (1024 px) 的解析度。從 1024×1024 向下縮小產生 512、180、32、16 等尺寸能保證每一種尺寸都極致清晰;反之用小圖放大則會嚴重模糊。

相關影像與向量工具推薦

每個工具專注解決單一明確需求,點擊下方卡片即可切換至對應工具。

分享此工具

幫助他人發現這個免費且私密的 SVG 轉 PNG 轉換器。