PNG轉為ICNS格式

發表於： 分類於：
字數： 1134 閱讀：≈ 3分鐘

教程用途

本教程用於 Mac 應用的圖標製作，將 PNG 格式圖片轉換為 Mac 應用所需的 ICNS 格式圖標文件。0

準備工作

  1. 準備原始圖片

    • 準備一張 1024×1024 像素的 PNG 圖片
    • 將圖片重新命名為 1.png
    • 確保圖片質量良好，因為這將是所有尺寸圖標的來源

  2. 創建工作目錄

    • 進入圖片所在的文件夾
    • 新建一個名為 pngpic.iconset 的文件夾（可手動創建）
1

mkdir pngpic.iconset

執行命令步驟

使用 sips 命令生成不同尺寸的圖標

Mac 系統內建的 sips 命令可以批量處理圖片尺寸。以下命令將生成 Mac 圖標所需的各種尺寸：0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 生成 16x16 像素圖標
sips -z 16 16 1.png --out pngpic.iconset/icon_16x16.png

# 生成 32x32 像素圖標（16x16@2x）
sips -z 32 32 1.png --out pngpic.iconset/[email protected]

# 生成 32x32 像素圖標
sips -z 32 32 1.png --out pngpic.iconset/icon_32x32.png

# 生成 64x64 像素圖標（32x32@2x）
sips -z 64 64 1.png --out pngpic.iconset/[email protected]

# 生成 128x128 像素圖標
sips -z 128 128 1.png --out pngpic.iconset/icon_128x128.png

# 生成 256x256 像素圖標（128x128@2x）
sips -z 256 256 1.png --out pngpic.iconset/[email protected]

# 生成 256x256 像素圖標
sips -z 256 256 1.png --out pngpic.iconset/icon_256x256.png

# 生成 512x512 像素圖標（256x256@2x）
sips -z 512 512 1.png --out pngpic.iconset/[email protected]

# 生成 512x512 像素圖標
sips -z 512 512 1.png --out pngpic.iconset/icon_512x512.png

# 生成 1024x1024 像素圖標（512x512@2x）
sips -z 1024 1024 1.png --out pngpic.iconset/[email protected]

命令參數說明

  • -z 16 16：指定輸出圖片的寬度和高度（16×16 像素）
  • 1.png：輸入的原始圖片文件名
  • --out：指定輸出文件的路徑和名稱

生成 ICNS 文件

完成所有尺寸圖標的生成後，使用 iconutil 命令將 iconset 文件夾轉換為 ICNS 格式：0

1

iconutil -c icns pngpic.iconset -o icon.icns

執行完成後，將在當前目錄生成一個 icon.icns 文件，這就是最終的 Mac 應用圖標文件。

技術說明

Mac 圖標規格要求

Mac 應用圖標需要包含多種尺寸以適應不同的顯示場景：

  • 16×16：Finder 中的小圖標
  • 32×32：Finder 中的標準圖標
  • 128×128：Finder 中的大圖標
  • 256×256：Finder 中的超大圖標
  • 512×512：Retina 顯示器上的大圖標
  • 1024×1024：App Store 和高解析度顯示

文件命名規則

iconset 文件夾中的圖標文件必須遵循特定的命名規則：

  • icon_16x16.png：標準解析度圖標
  • [email protected]：高解析度（Retina）圖標
  • 以此類推…

注意事項

  1. 圖片質量：原始 PNG 圖片應該是高質量的，因為所有小尺寸圖標都是從它縮放而來
  2. 透明背景：建議使用透明背景的 PNG 圖片，這樣圖標在不同背景下都能正常顯示
  3. 圖標設計：遵循 Apple 的圖標設計指南，確保圖標在小尺寸下仍然清晰可辨

批量處理腳本

為了簡化操作，可以創建一個 shell 腳本來自動執行所有命令：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

#!/bin/bash

# 創建 iconset 目錄
mkdir -p pngpic.iconset

# 生成所有尺寸的圖標
sips -z 16 16 1.png --out pngpic.iconset/icon_16x16.png
sips -z 32 32 1.png --out pngpic.iconset/[email protected]
sips -z 32 32 1.png --out pngpic.iconset/icon_32x32.png
sips -z 64 64 1.png --out pngpic.iconset/[email protected]
sips -z 128 128 1.png --out pngpic.iconset/icon_128x128.png
sips -z 256 256 1.png --out pngpic.iconset/[email protected]
sips -z 256 256 1.png --out pngpic.iconset/icon_256x256.png
sips -z 512 512 1.png --out pngpic.iconset/[email protected]
sips -z 512 512 1.png --out pngpic.iconset/icon_512x512.png
sips -z 1024 1024 1.png --out pngpic.iconset/[email protected]

# 生成 ICNS 文件
iconutil -c icns pngpic.iconset -o icon.icns

echo "ICNS 圖標生成完成！"

參考資源