跳到主要內容

產生 iOS 與 Android App 圖示

只要一張圖片,就能在瀏覽器中產生 iOS、Android、PWA 與 favicon 的所有尺寸,並附上 Xcode 資產目錄與自適應圖示圖層,打包成一個 ZIP。

將圖示圖檔拖放到這裡PNG、JPG、WebP 或 SVG・建議 1024 × 1024 px 以上・最大 50 MB
選擇檔案在你的裝置上處理,不會上傳

一張圖片就能產生 39 個適用於 iOS、Android 和網頁的 PNG 圖示,並附上 Contents.json、adaptive icon XML、favicon.ico 和網頁 manifest,全部在瀏覽器中繪製。

在瀏覽器中執行・不需上傳運作方式

App 圖示產生器 使用方法

  1. 1

    加入你的圖檔

    拖放正方形的 PNG、JPG、WebP 或 SVG,建議 1024 × 1024 像素以上;背景透明的標誌也很適合。

  2. 2

    選擇平台

    預設為 iOS、Android 和網頁與 PWA,沒有要上架的平台可以取消勾選,並選擇完整的 Xcode 尺寸組合,或只輸出一個 1024 px 圖示。

  3. 3

    調整外觀

    設定邊距、背景顏色,以及 Android adaptive 與可遮罩圖示中圖案的大小,同時對照安全區參考線和啟動器形狀檢查。

  4. 4

    下載 ZIP

    按下「下載 ZIP」,再把每個資料夾複製到你的專案中;裡面的 README 會說明每個檔案該放在哪裡。

限制與 Pro

免費且無浮水印:一次一張來源圖片,大小上限 50 MB,每個 ZIP 最多 44 個 PNG 圖示(預設 39 個,啟用主題圖示圖層後多 5 個),下載次數不限。

關於 App 圖示產生器

App 圖示產生器可以把一張圖片變成行動 App 或漸進式網頁應用程式所需的完整圖示組,檔名與資料夾結構都符合 Xcode、Android Studio 和瀏覽器的要求。選取所有平台時,ZIP 內共有 39 個 PNG 檔:iPhone 與 iPad 資產目錄 15 個(含 1024 px 的 App Store 圖示)、Android 啟動器圖片 15 個(涵蓋 mdpi 到 xxxhdpi 密度)、512 px 的 Google Play 圖示,以及 8 個網頁圖示,包括 192 與 512 px 的 manifest 尺寸、可遮罩版本、180 px 的 apple-touch-icon,以及 16、32、48 px 的 favicon。

除了圖片,還會附上 AppIcon.appiconset 用的 Contents.json、供 Android 8 adaptive 圖示使用的 mipmap-anydpi-v26 XML(含背景顏色資源)、包含三種尺寸的 favicon.ico、manifest.webmanifest 的 icons 區塊,以及 HTML link 標籤。iOS 檔案不含 alpha 通道,因為 Xcode 會拒絕帶有 alpha 的 App Store 圖示;所有尺寸都由 1024 px 母版以逐次減半的方式縮小,讓小圖示依然清晰。

這個工具不會幫你設計圖示或去除背景,adaptive 背景圖層也是使用純色,而不是第二張圖片。圓角方形、水滴形和圓形預覽只是模擬常見的啟動器;各家手機廠商的遮罩都不同,請在實機上確認結果。

隱私

你的圖檔會由這個瀏覽器分頁透過 canvas 和本機 Web Worker 解碼、縮放並打包成 ZIP,圖片不會離開你的裝置,也不會上傳或儲存。

功能

Xcode 資產目錄

AppIcon.appiconset 含 Contents.json,涵蓋 iPhone 與 iPad 所有尺寸,PNG 不含 alpha 通道。

Android adaptive 圖示

前景圖層、背景顏色資源、圓形圖示、主題圖層,以及 Play 商店的 512 圖示。

PWA 與 favicon

manifest 圖示、可遮罩版本、apple-touch-icon、favicon.ico,以及現成的 HTML 標籤。

App 圖示產生器:常見問題

來源圖片應該多大?
請使用至少 1024 × 1024 像素的正方形圖片,這是 App Store 圖示的尺寸,也是整組圖示中最大的檔案。較小的圖片仍可使用,但大尺寸圖示會被放大而顯得模糊,工具也會提醒你。SVG 會以完整解析度繪製,所以向量標誌在任何尺寸都能保持銳利。
檔案要放在 Xcode 專案的哪裡?
在 Xcode 中開啟 Assets.xcassets,刪除現有的 AppIcon 組,再把 ZIP 裡的 ios/AppIcon.appiconset 資料夾拖進去,或在 Finder 中直接取代該資料夾。Contents.json 會把每個 PNG 對應到 iPhone、iPad 或 App Store 的欄位。若專案使用 Xcode 14 以上,也可改選 Single 1024,讓 Xcode 自行產生較小的尺寸。
Android adaptive 圖示是怎麼運作的?
從 Android 8 開始,啟動器圖示由兩個 108 dp 的圖層組成:背景(這裡是你選的顏色)和放有圖案的前景。啟動器會裁切中央 72 dp,再套用自己的形狀,例如圓形或圓角方形,所以超出中央 66 dp 圓形的內容可能會被切掉。預覽上的安全區參考線會標示這兩個邊界。
PWA 的可遮罩圖示是什麼?
可遮罩圖示會讓背景鋪滿整個正方形,Android 就能把它裁成任何形狀而不出現白邊。瀏覽器只保證涵蓋圖片中央 80% 的圓形範圍可見,所以標誌請放在這個範圍內。ZIP 內含 192 與 512 px 的可遮罩 PNG,manifest 片段也會在一般圖示旁以 purpose maskable 標註它們。
為什麼我的 iOS 圖示有背景顏色?
Apple 要求 App 圖示必須完全不透明:帶有 alpha 通道的 App Store 圖示無法通過驗證,透明區域在主畫面上也會顯示成黑色。因此,即使開啟了「網頁圖示使用透明背景」,iOS 圖示、apple-touch-icon、Play 商店圖示以及 adaptive 與可遮罩圖示仍會以你的背景顏色填滿。