Logo
BulkPicTools

從一張圖片生成 Web、Android 和 iOS 的 App 圖標

從一張正方形圖片創建適用於 Web、Android 和 iOS 的量產級 App 圖標包裝。在一個瀏覽器為本的工作流程中,生成 favicon、PWA 清單圖標、Android 啟動器資源和 Xcode AppIcon.appiconset。

scenes.detail.local_processing scenes.card.free
scenes.detail.upload_title

scenes.detail.upload_hint

App 圖標包裝生成器的功能

Web 的 Favicon 和 PWA 素材

創建 PNG 格式的 favicon、favicon.ico、Apple touch 圖標、PWA 圖標、可選的可遮罩圖標、site.webmanifest 以及可直接複製使用的 head 標籤代碼片段。

Android 啟動器資源

導出特定密度的啟動器圖標、可選的圓形圖標、Android 自適應圖標資源和 512 × 512 的 Play Store 上架圖標。

Xcode 即用的 iOS 圖標集

獲取包含 iPhone、iPad 和 App Store 圖標槽位的 AppIcon.appiconset,以及 Xcode 映射所需的 Contents.json 文件。

單一來源,一致的品牌形象

使用單一源圖片和共享的內邊距與背景設置,讓您的瀏覽器、Android 和 iOS 圖標在視覺上保持一致。

對開發者友好的 ZIP 結構

下載結構清晰的 web、android 和 ios 資料夾,包含可預測的文件名稱,以及說明每組文件放置位置的 README。

本地瀏覽器處理

您的源圖片在瀏覽器中處理,無需上傳到遠端圖片處理伺服器。

從源圖片到 App 圖標包裝

1

上傳正方形圖片

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

2

選擇平台和樣式

選擇 Web/PWA、Android、iOS 或三者全部。在生成素材前設置圖案內邊距和背景顏色。

3

以實際使用尺寸預覽

在導出前,於瀏覽器分頁、Android 啟動器和 iOS 主屏幕預覽中檢查結果。

4

下載並安裝

下載一個包含平台資料夾、配置文件、代碼片段和項目 README 的 ZIP。

ZIP 裡面有什麼?

只選擇您需要的平台。每個選中的平台都會獲得一個獨立的即用型資料夾。

web/

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

android/

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

ios/

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

專為常見上線任務打造

上線 PWA

從同一品牌標誌創建 favicon、清單文件、Apple touch 和可遮罩圖標素材。

發布 Android 應用程式

準備啟動器密度資源、圓形變體、自適應圖標文件和 Play Store 上架圖片。

發布 iPhone 應用程式

生成 Xcode 即用的 AppIcon.appiconset,無需手動導出每個縮放比例。

保持多平台品牌一致

在 Web 和原生平台間使用共享的內邊距、源圖案和背景顏色。

準備在各種尺寸下都有效的源圖片

優秀的 App 圖標必須從微小的 16 × 16 瀏覽器 favicon 到大型的 512 × 512 商店上架圖片都能被識別。請從正方形源圖片開始,最好為 1024 × 1024 像素或更大,並在中央放置簡單、高對比度的標誌。

避免使用小號文字、纖細的輪廓和僅在大尺寸下有效的視覺細節。當瀏覽器或操作系統以小尺寸渲染您的圖標時,這些細節往往會消失。如果您的標誌是長方形,請先將其放置在正方形畫布上,而不是拉伸它。

  • 當原始圖案包含透明度或銳利的標誌邊緣時,請使用 PNG。
  • 將主要標誌置中,並在其周圍保留可見的呼吸空間。
  • 如果您也需要 iOS 輸出,請使用純色背景。
  • 在下載最終包裝前,預覽最小的 favicon 尺寸。

Web 的 Favicon、Apple Touch 圖標和 PWA 清單圖標

Web/PWA 導出涵蓋了 public 資料夾中常用的瀏覽器和可安裝 Web 應用程式素材。它包括現代瀏覽器適用的 PNG favicon 尺寸、用於更廣泛傳統兼容性的可選 favicon.ico,以及用於 iOS 主屏幕書籤的 Apple touch 圖標。

對於可安裝的 PWA,包裝還包括 192 × 192 和 512 × 512 的清單圖標。當您啟用可遮罩選項時,它會添加一個旨在當設備應用其自身圖標形狀時保留重要圖案的圖標。

包含清單設置,但不包含 PWA 實現

生成的 site.webmanifest 和 head 標籤代碼片段可加速圖標設置。您的應用程式仍需其餘的 PWA 配置,例如適當的服務 worker 和可安裝性要求。

Android 啟動器和自適應圖標資源

Android 設備使用特定密度的啟動器資源,以便操作系統可以為每個屏幕密度選擇合適的圖片。Android 導出將這些文件組織到常見的 res/mipmap-* 目錄中,並可包含圓形啟動器變體和 512 × 512 的 Play Store 上架圖標。

自適應圖標是 Android 原生啟動器資源,通過 XML 定義結合前景和背景圖層。在單圖模式裡,此生成器會從您的源圖片和所選背景顏色創建兼容的派生資源。

重要提示:自適應圖標不等於自動圖案分離

單一的平面圖片無法可靠地拆分為真正可編輯的標誌前景和獨立的背景圖層。為獲得最佳效果,請將標誌置中並保留充足的內邊距。對於品牌完美的自適應圖標,請在您的 Android 項目中使用分別設計的前景和背景圖案。

適用於 Xcode 的 iOS AppIcon.appiconset

iOS 導出創建一個專為 Xcode 素材目錄設計的 AppIcon.appiconset 資料夾。它包括 iPhone、iPad 和 App Store 所需的圖片變體,並附帶 Contents.json 文件,將每個生成的圖片映射到其預期的 idiom、點尺寸和縮放比例。

iOS App 圖標會被扁平化到所選的背景顏色上。這避免了透明圖標輸出,並使生成的素材集符合標準的 App Store 圖標要求。

  • 不要預先將圖案圓角化;iOS 會應用其自身的圖標遮罩。
  • 使用與您的產品身份匹配的背景顏色。
  • 將 AppIcon.appiconset 拖入 Assets.xcassets,然後將其選為目標 App 圖標集。
  • 在提交構建前,於 Xcode 中審查生成的圖標。

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

這兩個術語很容易混淆,因為它們都涉及系統控制的圖標形狀。但它們不可互換。

可遮罩圖標是一個 Web 應用程式清單圖片文件,為已安裝的 PWA 提供額外的安全空間以適應啟動器遮罩。Android 自適應圖標是一個原生 Android 資源,由前景和背景圖層及 XML 引用組成。當您同時發布 PWA 和原生 Android 應用程式時,請啟用兩者,但請在各自的平台設置中使用每種文件類型。

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

此場景專為瀏覽器內的圖片處理而設計。源圖片在瀏覽器本地轉換,而不是上傳到遠端圖片處理伺服器,這對於準備未發布的產品圖案、客戶標誌或內部應用程式素材時非常有用。

頁面本身仍會從網站加載應用程式代碼和處理資源。本地處理意味著圖片數據無需發送到伺服器進行轉換。

如何使用生成的文件

Web / PWA

  1. 1.將 web/ 的內容複製到您的 public 網站目錄。
  2. 2.將生成的 head 標籤代碼片段粘貼到您的文檔 head 或框架元數據配置中。
  3. 3.如有需要,使用最終的應用程式名稱、短名稱、顏色和 URL 更新 site.webmanifest。
  4. 4.在瀏覽器中打開網站,並驗證 favicon、清單文件和安裝提示。

Android

  1. 1.將生成的 android/res 目錄複製到您的 Android 項目的 app/src/main/res 中。
  2. 2.確認 AndroidManifest.xml 和自適應圖標 XML 資源中的應用程式圖標引用。
  3. 3.在適用的情況下,將 512 × 512 的 Play Store 圖片用於您的商店上架。
  4. 4.在發布前,於多個啟動器形狀上進行構建和測試。

iOS / iPadOS

  1. 1.打開您的 Xcode 項目的 Assets.xcassets 目錄。
  2. 2.將生成的 AppIcon.appiconset 資料夾拖入該目錄。
  3. 3.將目標的 App Icons Source 設置為導入的 AppIcon 集。
  4. 4.構建應用程式,並在設備上和歸檔驗證流程中檢查圖標。

scenes.detail.related_tools

App 圖標包裝生成器的常見問題

它會創建一個包含您所選平台圖標素材的 ZIP 包裝。根據您的設置,這可能包括 Web 的 favicon、favicon.ico、Apple touch 圖標、PWA 和可遮罩圖標、site.webmanifest、Android 啟動器和自適應圖標資源、Play Store 圖標,以及附帶 Contents.json 的 iOS AppIcon.appiconset。