從 Xcode 設定 iOS App Icon

從前從前,設定 iOS 的 App Icon 要很久很久,因為我們要自己產生各種尺寸的 App Icon。

從 Xcode 14 開始,終於不用這麼麻煩了 ! 我們只要使用 1024x1024 像素的圖片,Xcode 將幫我們自動縮小生成各種尺寸的 App Icon。以下彼得潘以 Apple 範例 Destination Video 提供的 icon 圖片說明。

ps: 找不到漂亮 icon 的朋友也可以請 AI 幫忙設計。

點選 Assets,然後點選 AppIcon

AppIcon 裡有 3 個大大的格子,寫著 1024*1204px。

為什麼有 3 個格子呢?因為 iOS 18 開始使用者可調整桌面 icon 的顏色,長按桌面點選 Edit > Customize 後,有 Automatic、Dark、Light、Tinted 四種選擇。

從 Finder 將 icon 圖片拖曳到 AppIcon Any Appearance 的 1024*1024 格子

值得注意的,圖片的尺寸必須是 1024 * 1024 pixels。如果尺寸不合,可先利用 Preview 調整圖片的尺寸。圖片的格式可以是 png 或 jpg, Xcode 會幫我們生成各種尺寸的 png 圖檔。

大功告成 ! 現在只要啟動 App,即可在桌面看到剛剛設定的 icon。

改成 Dark mode 和 Tinted mode 時 icon 也會自動變色。

如果想在 Dark & Tinted mode 有更好的效果,則可為 Dark & Tinted mode 設計適合的 icon,設計的方向可參考以下 Apple 設計文件的建議,像是 Dark mode 使用去背的圖片,Tinted mode 使用灰階的圖片。

以下彼得潘直接套用 Apple 範例 Destination Video 設計的 icon。

如果想要不同尺寸的 App Icon 採用不同圖片,也可以另外指定。切換到下圖的 Attributes inspector 分頁,找到 iOS 欄位。Single Size 表示只有 1024*1024 的格子,Xcode 會自動幫我們生成各種尺寸的 App Icon。

若是選擇 All Sizes,將長出各種尺寸的 App Icon 格子,方便我們指定不同尺寸的 Icon 圖片。

參考連結

--

--

彼得潘的 iOS App Neverland
彼得潘的 Swift iOS App 開發問題解答集

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com