可以上傳哪些圖片檔案？

您可以上傳一張 PNG、JPEG 或 WebP 圖片。圖片必須是 1:1 的正方形比例，且至少為 512 × 512 像素。建議使用 1024 × 1024 的 PNG 或更大尺寸，以在所有輸出尺寸下獲得較清晰的結果。

為什麼圖片必須是正方形？

Favicon、啟動器圖示和 App Store 圖示都是在正方形畫布上產生。正方形來源圖片可避免不必要的拉伸，也能讓相同圖案在不同平台尺寸中保持一致。

我可以只產生 Web、Android 或 iOS 的檔案嗎？

可以。您可選擇 Web / PWA、Android、iOS / iPadOS，或任意組合。預覽與 ZIP 封裝只會包含所選平台的輸出檔案。

這會產生 favicon.ico 嗎？

會。啟用 favicon.ico 選項後，除了 PNG favicon 尺寸之外，還會加入 ICO 檔案。若目前使用的瀏覽器處理引擎支援 ICO 編碼，ICO 檔案會包含已設定的小型 favicon 尺寸。

什麼是可遮罩 PWA 圖示？

可遮罩圖示是為 PWA Manifest 設計的圖片，會在重要圖案周圍保留額外安全空間。裝置可能套用不同的啟動器圖示形狀，安全區域可協助避免 Logo 被裁切。

可遮罩 PWA 圖示和 Android 自適應圖示相同嗎？

不同。可遮罩圖示是由 Web App Manifest 參照的圖片；Android 自適應圖示則是使用前景和背景圖層，以及 XML 定義的原生 Android 資源。兩者解決的是相關但不同的平台需求。

一張圖片可以建立真正的 Android 前景與背景圖層嗎？

無法可靠地做到。單張圖片模式中，產生器會根據您的圖片與選取背景顏色，建立相容的衍生自適應資源；但無法理解並自動將圖案分離為可獨立編輯的設計圖層。若要取得最理想的原生效果，請準備專用的前景和背景圖案。

會包含哪些 Android 檔案？

Android 匯出可包含從 res/mipmap-mdpi 到 res/mipmap-xxxhdpi 的啟動器圖示、圓形變體、Android 自適應圖示 XML 與 drawable 資源，以及 512 × 512 的 Play 商店上架圖示。

會包含哪些 iOS 檔案？

iOS 匯出包含帶有 iPhone、iPad 和 App Store 圖示欄位的 AppIcon.appiconset，以及 Contents.json。為提供可直接用於 iOS 的輸出，圖片檔案會合成至您選取的背景顏色上。

iOS 會自動將圖示圓角嗎？

會。請讓匯出的 iOS 圖示維持正方形；iOS 會自行套用系統圖示遮罩，因此您不應在匯出前永久將來源圖案做成圓角。

可以使用透明 PNG 嗎？

可以。在適當情況下，透明度可保留在 Web 素材與 Android 衍生資源中。對於 iOS 輸出，產生器會將透明區域合成至選取的背景顏色上。

我還需要 Android Studio 或 Xcode 嗎？

需要。此工具會準備圖片資源與設定檔，但您仍需將 Android res 檔案加入 Android 專案，並將 AppIcon.appiconset 匯入 Xcode Asset Catalog。

產生 Web Manifest 後，我的網站就會成為 PWA 嗎？

不會。產生的 Manifest 與圖示只涵蓋圖示相關設定。完整且可安裝的 PWA 仍需要其餘應用程式設定，包括對應的 Service Worker 和瀏覽器需求。

我的圖片會上傳到伺服器嗎？

不需要上傳圖片到遠端處理伺服器。圖片轉換工作流程會在您的瀏覽器中執行；瀏覽器仍會以正常方式載入網站和處理所需資源。

這個 App 圖示封裝產生器免費嗎？

是的，這個 App 圖示封裝工作流程可免費使用。

從一張圖片產生 Web、Android 和 iOS App 圖示

從一張正方形圖片建立可直接用於正式專案的 Web、Android 和 iOS App 圖示封裝。在同一個瀏覽器工作流程中，產生 favicon、PWA Manifest 圖示、Android 啟動器資源，以及 Xcode AppIcon.appiconset。

本機處理免費

上傳您的圖片

拖放檔案或點擊選擇，支援 JPG、PNG、WebP 等格式。

App 圖示封裝產生器的功能

Web Favicon 與 PWA 素材

建立 PNG favicon、favicon.ico、Apple touch 圖示、PWA 圖示、可選的可遮罩圖示、site.webmanifest，以及可直接貼上的 head 標籤程式碼片段。

Android 啟動器資源

匯出依螢幕密度區分的啟動器圖示、可選的圓形圖示、Android 自適應圖示資源，以及 512 × 512 的 Play 商店上架圖示。

可直接用於 Xcode 的 iOS 圖示集

取得含有 iPhone、iPad 和 App Store 圖示欄位的 AppIcon.appiconset，以及供 Xcode 對應使用的 Contents.json 檔案。

單一來源，維持品牌一致性

使用同一張來源圖片、共用的留白和背景設定，讓瀏覽器、Android 與 iOS 圖示在視覺上保持一致。

對開發者友善的 ZIP 結構

下載結構清楚的 web、android 和 ios 資料夾，搭配一致的檔名，以及說明各組檔案應放置位置的 README。

瀏覽器本機處理

您的來源圖片會在瀏覽器中處理，不會傳送到遠端圖片處理伺服器。

從來源圖片到 App 圖示封裝

上傳正方形圖片

請使用比例為 1:1 的 PNG、JPEG 或 WebP 圖片。最低可接受尺寸為 512 × 512；建議使用 1024 × 1024 或更大的圖片。

選擇平台和樣式

選擇 Web/PWA、Android、iOS，或同時選擇三者。產生素材前，可設定圖案留白和背景顏色。

以實際使用尺寸預覽

匯出前，可在瀏覽器分頁、Android 啟動器和 iOS 主畫面預覽中檢查結果。

下載並安裝

下載一個包含平台資料夾、設定檔、程式碼片段和專案 README 的 ZIP 檔案。

ZIP 內含哪些內容？

只選擇您需要的平台。每個選取的平台都會有各自可直接使用的資料夾。

web/

Favicon、Apple touch 圖示、PWA 圖示、可選的可遮罩圖示、site.webmanifest 和 head 標籤程式碼片段。

android/

res/mipmap 啟動器素材、可選的圓形圖示、自適應圖示資源和 Play 商店上架圖示。

ios/

包含 iPhone、iPad 和 App Store 欄位的 AppIcon.appiconset，以及 Contents.json。

為常見上線工作而設計

推出 PWA

從同一個品牌標誌建立 favicon、Manifest、Apple touch 與可遮罩圖示素材。

發布 Android 應用程式

準備啟動器密度資源、圓形變體、自適應圖示檔案和 Play 商店圖片。

推出 iPhone 應用程式

產生可直接用於 Xcode 的 AppIcon.appiconset，無需手動逐一匯出每種縮放比例。

維持多平台品牌一致性

在 Web 與原生平台間共用相同的留白、來源圖案和背景顏色。

準備適用於各種尺寸的來源圖片

好的 App 圖示必須從小型的 16 × 16 瀏覽器 favicon，到大型的 512 × 512 商店上架圖片，都能維持可辨識性。請從正方形來源圖片開始，建議使用 1024 × 1024 像素或更大的尺寸，並在中央放置簡單、對比明顯的標誌。

請避免使用小字、細線輪廓，以及只在大尺寸下才清楚的視覺細節。當瀏覽器或作業系統以小尺寸呈現圖示時，這些細節常會消失。若您的 Logo 是長方形，請先將它放在正方形畫布上，而不是直接拉伸。

若原始圖案有透明區域或銳利的 Logo 邊緣，請使用 PNG。
將主要標誌置中，並在四周保留足夠的可視留白。
若也需要 iOS 輸出，請使用純色背景。
下載最終封裝前，請先預覽最小尺寸的 favicon。

Web Favicon、Apple Touch 圖示與 PWA Manifest 圖示

Web/PWA 匯出涵蓋 public 資料夾中常用的瀏覽器和可安裝網頁應用程式素材。內容包括現代瀏覽器使用的 PNG favicon 尺寸、可提供較廣泛舊版相容性的 favicon.ico，以及適用於 iOS 主畫面書籤的 Apple touch 圖示。

對於可安裝的 PWA，封裝也包含 192 × 192 和 512 × 512 的 Manifest 圖示。啟用可遮罩選項後，系統套用不同圖示形狀時，該圖示可為重要圖案保留額外的安全空間。

包含 Manifest 設定，不等於完成 PWA 實作

產生的 site.webmanifest 與 head 標籤程式碼片段可加快圖示設定流程。您的應用程式仍需要完成其餘 PWA 設定，例如適當的 Service Worker 和可安裝性需求。

Android 啟動器與自適應圖示資源

Android 裝置會使用依螢幕密度區分的啟動器資源，讓作業系統可以為每個螢幕密度選擇合適的圖片。Android 匯出會將這些檔案整理至常見的 res/mipmap-* 目錄中，並可包含圓形啟動器變體和 512 × 512 的 Play 商店上架圖示。

自適應圖示是 Android 原生啟動器資源，透過 XML 定義結合前景和背景圖層。在單張圖片模式下，此產生器會根據來源圖片與選取的背景顏色，建立相容的衍生資源。

重要：自適應圖示不會自動分離圖案圖層

單一平面圖片無法可靠地拆分為真正可編輯的 Logo 前景與獨立背景圖層。為獲得較佳結果，請讓 Logo 置中並保留足夠留白。若要建立最符合品牌需求的自適應圖示，請在 Android 專案中使用另外設計的前景和背景圖案。

適用於 Xcode 的 iOS AppIcon.appiconset

iOS 匯出會建立專為 Xcode Asset Catalog 設計的 AppIcon.appiconset 資料夾。它包含 iPhone、iPad 和 App Store 所需的圖片變體，以及用來將每張產生圖片對應至預期裝置類型、點數尺寸和縮放比例的 Contents.json 檔案。

iOS App 圖示會合成至選取的背景顏色上。這可避免輸出透明圖示，並讓產生的素材集符合常見的 App Store 圖示需求。

請勿預先將圖案做成圓角；iOS 會自行套用系統圖示遮罩。
使用符合產品品牌識別的背景顏色。
將 AppIcon.appiconset 拖曳至 Assets.xcassets，然後選取為目標應用程式的 App 圖示集。
提交建置前，請先在 Xcode 中檢查產生的圖示。

可遮罩 PWA 圖示與 Android 自適應圖示

這兩個術語都與系統控制的圖示形狀有關，因此很容易混淆；但它們並不能互相替代。

可遮罩圖示是 Web App Manifest 使用的圖片檔案，可為已安裝的 PWA 提供額外的啟動器遮罩安全空間。Android 自適應圖示則是由前景和背景圖層，以及 XML 參照組成的原生 Android 資源。若您同時發布 PWA 和原生 Android 應用程式，請啟用兩者，但應在各自的平台設定中使用對應的檔案類型。

您的來源圖片會保留在瀏覽器中

此場景專為瀏覽器本機圖片處理而設計。來源圖片會在瀏覽器中進行本機轉換，而不是上傳到遠端圖片處理伺服器；當您準備尚未發布的產品圖稿、客戶 Logo 或內部應用程式素材時，這項設計特別實用。

頁面本身仍會從網站載入應用程式程式碼和處理資源。本機處理代表圖片資料不需要傳送到伺服器進行後端轉換。

如何使用產生的檔案

Web / PWA

1.將 web/ 的內容複製到您的公開網站目錄。
2.將產生的 head 標籤程式碼片段貼到文件的 head，或框架的中繼資料設定中。
3.如有需要，請以最終應用程式名稱、短名稱、顏色和 URL 更新 site.webmanifest。
4.在瀏覽器中開啟網站，確認 favicon、Manifest 和安裝提示是否正常。

Android

1.將產生的 android/res 目錄複製到 Android 專案中的 app/src/main/res。
2.確認 AndroidManifest.xml 與自適應圖示 XML 資源中的應用程式圖示參照。
3.如適用，請使用 512 × 512 的 Play 商店圖片作為商店上架圖示。
4.正式發布前，請在不只一種啟動器圖示形狀上建置並測試。

iOS / iPadOS

1.開啟 Xcode 專案中的 Assets.xcassets 目錄。
2.將產生的 AppIcon.appiconset 資料夾拖曳到目錄中。
3.將目標的 App Icons Source 設定為匯入的 AppIcon 圖示集。
4.建置應用程式，並在實機及封存驗證流程中檢查圖示。

App 圖示封裝產生器的常見問題

它會建立一個 ZIP 封裝，包含您所選平台需要的圖示素材。依您的設定，內容可能包括 Web favicon、favicon.ico、Apple touch 圖示、PWA 和可遮罩圖示、site.webmanifest、Android 啟動器與自適應圖示資源、Play 商店圖示，以及附帶 Contents.json 的 iOS AppIcon.appiconset。