上傳一張高解析度 PNG 或 JPG 正方形 Logo,即可在瀏覽器本機自動裁切並打包多尺寸二進位 favicon.ico、HTML <head> 引入程式碼,以及符合 iOS、Android、macOS 與 Windows 規範的全套應用程式圖示。
100% 瀏覽器本機處理 — 檔案絕不上傳伺服器,保障絕對隱私
或點擊選擇檔案
為獲得最佳效果,請上傳至少 512x512 像素的方形圖片。
適用於所有現代瀏覽器和裝置。
適用於 iOS、Android、macOS 和 Windows。
將產生一個完整的圖示套件,包括多種 PNG 尺寸、一個 favicon.ico 檔案和設定檔。
僅需輸入一張 1024×1024 像素主圖,即可秒級自動產生以下三大場景的完整標準工程套件:
產生真正的複合二進位 favicon.ico 檔案,同時配齊 iOS Safari 加入主畫面圖示、Android Chrome PWA 圖示,並提供一鍵複製的 HTML <link> 標籤程式碼。
徹底告別在 Photoshop 或 Figma 中手動匯出二十幾個尺寸的繁瑣步驟,自動依官方命名規範產生 iPhone、iPad、App Store (1024×1024) 及 Android 各螢幕密度資料夾。
專為 Electron、Tauri、Flutter 及 C#/.NET 桌面開發者打造,無需執行命令列指令即可一鍵產生高畫質工作列圖示、桌面捷徑與 macOS Dock 圖示。
現代網站與跨平台軟體早已不再只使用單一 16×16 的小圖示。各大瀏覽器、iOS、Android、Windows 與 macOS 要求提供超過 25 種不同像素尺寸與二進位封裝格式。
把 .png 檔案直接重新命名為 .ico 會導致部分瀏覽器與 Windows 檔案總管無法辨識或顯示模糊。本工具將 16×16、32×32、48×48 三個圖層依標準二進位標頭封裝進同一個 favicon.ico 中。
手動匯出 iOS 的 @1x/@2x/@3x 與 Android 的 mdpi 至 xxxhdpi 資料夾極易遺漏出錯。只需上傳一張 1024×1024 母版圖,3 秒內自動產生依平台分類的 ZIP 壓縮檔。
無論是新創專案的品牌 Logo 或企業內部系統的應用程式圖示,所有影像縮放、二進位編碼與 ZIP 封裝均在本機瀏覽器記憶體中完成,絕不上傳至任何外部伺服器。
為了確保從 1024×1024 的應用程式商店大圖到 16×16 的瀏覽器分頁小圖示都清晰銳利,請依以下規範準備來源圖片:
請準備長寬完全相等的正方形圖片,解析度建議不低於 512×512 px(若需產生 iOS App Store 圖示則必須為 1024×1024 px)。若上傳非正方形或尺寸過小的圖片,工具會自動顯示提醒。
支援直接上傳 .png、.jpg、.jpeg 檔案。如果您的 Logo 目前是 .svg 向量格式,請先點擊頂部導覽列的「SVG 轉 PNG」匯出為 1024×1024 px 的高畫質 PNG,再拖入本工具。
當圖示縮小到瀏覽器分頁列的 16×16 像素時,任何多字口號或極細線條都會糊成一團。建議僅保留核心圖形徽標或首字母縮寫,並在四周預留約 10% 的安全邊距。
網站 Favicon 與桌面軟體圖示非常適合使用透明背景 PNG;但蘋果 iOS 應用程式圖示不支援透明通道(透明區域會被系統強制填滿為純黑色),製作 iOS 圖示時請使用不透明實心背景。
將準備好的 PNG/JPG 圖片拖入藍色虛線上傳區,或點擊上方的「載入範例應用程式 Logo 測試」按鈕。左側預覽面板會立即顯示圖片效果並自動檢查像素尺寸是否符合建議。
在右側面板點擊選擇您的目標類型:架設網站、部落格或電商網站請選擇「Favicon 網站圖示」;開發手機 App 或電腦桌面軟體請選擇「App 應用程式圖示」。
若選擇了 App 圖示模式,可自由勾選 iOS (.appiconset)、Android (mipmap PNGs)、macOS (.icns) 與 Windows (.ico),接著點擊藍色的產生按鈕。
點擊下載按鈕儲存 Favicon.zip 或 App-Icons.zip。在網站圖示模式下,還可直接點擊程式碼區塊右上角的「Copy」按鈕,一鍵複製標準 HTML <head> 圖示引入標籤。
下載的 ZIP 壓縮檔已經依照各平台專案規範整理好資料夾結構,解壓縮即可直接投入使用:
將 Favicon.zip 解壓縮後的所有檔案放入網站的靜態根目錄(如 Next.js/Vue 的 public 目錄或 WordPress 根目錄),並將產生面板中的 <link> 程式碼貼到網頁 <head> 標籤內即可生效。
iOS 開發者可將解壓縮出的 .appiconset 資料夾直接拖入 Xcode 的 Assets.xcassets 中;Android 開發者可將 mipmap-* 資料夾直接合併覆蓋至 app/src/main/res/ 目錄。
在 electron-builder 或 tauri.conf.json 設定檔中,直接指向壓縮包內的 Windows .ico 與 macOS .icns 圖示路徑,即可完成安裝包與桌面捷徑設定。
在製作網站 Favicon 與應用程式圖示時,以下三個常見誤區最容易造成圖示變形或模糊:
無論是瀏覽器分頁或手機桌面圖示,全部強制採用 1:1 正方形畫布。將扁長的橫幅 Logo 強行縮進 16×16 正方形中,圖形高度只剩 4 個像素,完全無法辨識。
上傳前請先裁切掉右側的長串品牌文字,僅擷取左側正方形的圖形標誌(Symbol/圖形徽標)並匯出為 1024×1024 正方形圖片。
蘋果 iOS 系統規範不支援帶 Alpha 透明通道的應用程式圖示。如果您上傳的是圓角鏤空或全透明底的 PNG,iOS 系統會自動把透明區域全部填滿為純黑色(#000000)。
若需要製作 iOS 應用程式圖示或加入 iPhone 主畫面的圖示,請在設計軟體中為 Logo 鋪上一層純白或品牌色直角正方形背景後再匯出上傳。
將 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 圖示進行極限體積壓縮 |
非常簡單!請先點擊頁面頂部導覽列的「SVG 轉 PNG」工具,將輸出寬高設定為 1024×1024 像素並下載高畫質 PNG;接著回到本頁面將該 PNG 拖入,即可一鍵產生全套 favicon.ico 與應用程式圖示包。
壓縮檔內包含複合多尺寸的 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 圖示。
這是因為 Chrome、Safari 等瀏覽器對網站 Favicon 有極強的本機快取機制。您可以透過「無痕視窗」打開網站驗證,或是在 HTML 的引入連結後面加上版本號參數強制重新整理快取,例如:<link rel="icon" href="/favicon.ico?v=2">。
100% 安全。本工具的影像多尺寸縮放、ICO/ICNS 二進位標頭封裝以及 ZIP 壓縮包製作,全部透過瀏覽器本機 JavaScript 與 Canvas 完成,您的圖片資料全程不會離開您的電腦。
因為蘋果 App Store 應用程式商店圖示強制要求 1024×1024 px,macOS Retina 圖示也需要高達 512×512@2x (1024 px) 的解析度。從 1024×1024 向下縮小產生 512、180、32、16 等尺寸能保證每一種尺寸都極致清晰;反之用小圖放大則會嚴重模糊。
每個工具專注解決單一明確需求,點擊下方卡片即可切換至對應工具。