#1 iOS App Icon 製作工具推薦

iOS App 在桌面顯示所用到的 Icon 有很多尺寸，雖然我有所有尺寸表、也有繪圖軟體可以自己做，但是借助一些工具可以更快的完成。

本文介紹二個 Icon 製作工具：

• App icon Generator
• Figma

1. App icon Generator

線上 iOS App Icon 製作工具，以前都是用 Adobe XD 或是 Figma 自己做，這個網站只要把圖做好之後上傳就給你各種尺寸的 icon 圖。

1. 前往 App icon Generator 網站

App Icon Generator

2. 上傳圖片：將預先製作好的 1024 X 1024 尺寸的圖片拖拉到網頁左邊 Click or drag image file 的灰色方塊裡

App icon Generator 網站首頁很簡潔

3. 右邊勾選要輸出的裝置，因為只需要手持裝置的icon，所以是勾選 iPhone 與 iPad

拖拉圖片到左邊

4. 點擊 Generate 下載 Icon，會獲得一個 AppIcons.zip 的壓縮檔

下載 iOS Icon

5. 解壓縮之後可以看到有多種規格的png圖片

下載後的檔案列表

6. 打開 Xcode 專案，點選 Assets.xcassets 選擇 AppIcon 按下 Delete 鍵刪除它。

刪除 Xcode 專案裡的 AppIcon

7. 從剛剛解壓的檔案裡面找到 AppIcon.appiconset 按 Cmd + C 拷貝

複製 AppIcon.appiconset 整個資料夾

8. 回到 Xcode 專案，點選 Assets.xcassets 右邊的空白處，按 Cmd + V 貼上。Xcode 就會把各種尺寸的 Icon 整理到對應的格子。

貼上 AppIcon

9. 按下編譯執行APP，可以看到模擬器上，自製的 Icon 已經出現在桌面上了。

模擬器上顯示出完成的 App Icon

2. Figma 工具

介紹完超方便的線上工具，再來介紹一下以前用 Figma 如何製作 App Icon。這邊只介紹 Icon 製作方式，至於 Figma 的基礎操作以後有機會再寫教學。

Figma 的好處是有很多分享的模板可以下載，不用自己辛苦從無到有。

1. 前往 Figma 網站，下載 ICONKIT 的樣板

https://www.figma.com/community/file/823028816343077563

2. 按右上角的 ↓ Duplicate 把模版拷貝到自己的 Figma

3. 登入或註冊 Figma

必須要先有 Figma 帳號才能把模版加到到自己的 Drafts ，這邊先略過註冊過程直接登入，選擇用 Google帳號登入。

4. 進入 Drafts 草稿分頁後，就可以看到剛剛載的 ICONKIT，可以自己重新做檔案命名，在 ICONKIT 卡片上點二下打開檔案。

5. 模版首頁有 Icon 的製作步驟說明

• 設計你的 Icon圖案
• 打開 Icon 設計的 Layer
• 選擇 Hide Layer Content
• 把你設計好的圖貼進 Frame 裡

6. 按 Cmd + C 拷貝事先設計好的 Icon 檔，尺寸是 512 x 512

7. 左邊 Layer 點 Icon App Design 的小箭頭展開組件，選擇 [Hide Layer] 按下 Cmd + V 貼上

8. 貼上後的樣子

9. 左邊的 Layer 切換 Preview & Export iOS  是 iOS 的 Icon，第三個 Layer 是 Android 的 Icon。可以看到 Icon 全部按照尺寸填入。

iOS 的 Icon

Android 的 Icon

10. 匯出 Icon，滑鼠選取要輸出的 Icon，右下 Export 選擇輸出格式為 PNG ，按下 Export 按鈕，會在桌面看到一個壓縮檔 ICONKIT (Community).zip

11. 解壓縮之後獲得的檔案列表

問題來了，其實這個列表並不齊全所以要自己補全缺少的尺寸，而且命名最好是與 Xcode裡的一樣會比較省事。

放入 Xcode的方式參照上面 App icon Generator 的方式

為什麼 Figma 比較麻煩還是要寫呢？ 因為以前就是這麼過來的，沒有比較就沒有傷害啊😭
但是如果 你很熟 Figma 的話，其實可以自己改良這個 Icon 組件，讓它可以一個步驟就產生所有我們要的尺寸。就是一開始設定會比較花時間，之後就可以跟線上匯出 Icon一樣快了

參考文章

從 App Icon Generator 產生 iOS App Icon