📚Weii's Blog

Appearance

2025-04-28macOS.icns
1297
5.7m
0

制作 macOS 图标集（.icns） ​

背景知识 ​

在 macOS 开发中，应用程序的图标需要以 .icns（Apple Icon Image Format）格式提供。与普通的 .png 或 .jpg 不同，.icns 文件实际上是一个图标容器，内部包含了多种尺寸和分辨率的图标，以便系统在不同场景下自动选择最合适的版本：

  • Finder 列表视图：使用 16×16 或 32×32 像素图标
  • Finder 图标视图：使用 128×128 或 256×256 像素图标
  • Dock 栏：使用 128×128 或 256×256 像素图标
  • Retina 屏幕：使用 @2x 高分辨率图标（实际像素是显示尺寸的两倍）

一个完整的 .icns 文件通常包含 10 个图像资源，覆盖从 16×16 到 512×512@2x（1024×1024）的所有常见尺寸。

前置要求 ​

  • macOS 系统（依赖 sips 和 iconutil 命令）
  • 一张高清的源图标图片（建议至少 1024×1024 像素，格式为 PNG）
  • 源图标最好是正方形，且背景为透明（macOS 图标通常为圆角矩形）

手动制作步骤 ​

1. 准备目录和素材 ​

将源图标文件（如 icon.png）放在工作目录下，然后创建 .iconset 文件夹：

shell
mkdir icons.iconset

.iconset 是一种特殊的文件夹扩展名，macOS 会将其识别为图标集。

2. 生成各尺寸图标 ​

使用 sips（Scriptable Image Processing System）命令将源图标缩放为不同尺寸：

shell
# 16×16 像素（标准分辨率）
sips -z 16 16 icon.png -o icons.iconset/icon_16x16.png

# 16×16@2x = 32×32 像素（Retina 分辨率）
sips -z 32 32 icon.png -o icons.iconset/icon_16x16@2x.png

# 32×32 像素（标准分辨率）
sips -z 32 32 icon.png -o icons.iconset/icon_32x32.png

# 32×32@2x = 64×64 像素（Retina 分辨率）
sips -z 64 64 icon.png -o icons.iconset/icon_32x32@2x.png

# 128×128 像素（标准分辨率）
sips -z 128 128 icon.png -o icons.iconset/icon_128x128.png

# 128×128@2x = 256×256 像素（Retina 分辨率）
sips -z 256 256 icon.png -o icons.iconset/icon_128x128@2x.png

# 256×256 像素（标准分辨率）
sips -z 256 256 icon.png -o icons.iconset/icon_256x256.png

# 256×256@2x = 512×512 像素（Retina 分辨率）
sips -z 512 512 icon.png -o icons.iconset/icon_256x256@2x.png

# 512×512 像素（标准分辨率）
sips -z 512 512 icon.png -o icons.iconset/icon_512x512.png

# 512×512@2x = 1024×1024 像素（Retina 分辨率）
sips -z 1024 1024 icon.png -o icons.iconset/icon_512x512@2x.png

sips 参数说明：

  • -z height width：指定输出图像的高度和宽度（保持缩放）
  • -o output：指定输出文件路径

3. 打包为 .icns 文件 ​

使用 iconutil 命令将 .iconset 文件夹编译为 .icns 文件：

shell
iconutil -c icns icons.iconset -o icon.icns

参数说明：

  • -c icns：指定输出格式为 icns
  • -o output：指定输出文件名

执行成功后，会在当前目录下生成 icon.icns 文件。

一键脚本 ​

如果经常需要制作图标，可以将上述命令保存为脚本：

shell
#!/bin/bash

# 用法：./make_icns.sh <源图片路径> [输出名称]
# 示例：./make_icns.sh logo.png MyApp

SOURCE="${1:-icon.png}"
OUTPUT="${2:-icon}"

if [ ! -f "$SOURCE" ]; then
    echo "错误：找不到源图片 $SOURCE"
    echo "用法：$0 <源图片路径> [输出名称]"
    exit 1
fi

# 清理并创建目录
rm -rf "${OUTPUT}.iconset"
mkdir "${OUTPUT}.iconset"

echo "正在生成各尺寸图标..."

sips -z 16 16   "$SOURCE" -o "${OUTPUT}.iconset/icon_16x16.png"
sips -z 32 32   "$SOURCE" -o "${OUTPUT}.iconset/icon_16x16@2x.png"
sips -z 32 32   "$SOURCE" -o "${OUTPUT}.iconset/icon_32x32.png"
sips -z 64 64   "$SOURCE" -o "${OUTPUT}.iconset/icon_32x32@2x.png"
sips -z 128 128 "$SOURCE" -o "${OUTPUT}.iconset/icon_128x128.png"
sips -z 256 256 "$SOURCE" -o "${OUTPUT}.iconset/icon_128x128@2x.png"
sips -z 256 256 "$SOURCE" -o "${OUTPUT}.iconset/icon_256x256.png"
sips -z 512 512 "$SOURCE" -o "${OUTPUT}.iconset/icon_256x256@2x.png"
sips -z 512 512 "$SOURCE" -o "${OUTPUT}.iconset/icon_512x512.png"
sips -z 1024 1024 "$SOURCE" -o "${OUTPUT}.iconset/icon_512x512@2x.png"

echo "正在打包为 .icns..."
iconutil -c icns "${OUTPUT}.iconset" -o "${OUTPUT}.icns"

# 可选：清理临时目录
rm -rf "${OUTPUT}.iconset"

echo "完成！已生成 ${OUTPUT}.icns"

保存为 make_icns.sh 后执行：

shell
chmod +x make_icns.sh
./make_icns.sh my_logo.png MyAppIcon

图标设计建议 ​

尺寸规范 ​

用途尺寸备注
列表视图16×16, 32×32Finder 列表模式
图标视图128×128, 256×256Finder 图标模式
Dock128×128, 256×256, 512×512Dock 栏显示
Retina 支持所有尺寸的 @2x 版本高分辨率屏幕必需

设计要点 ​

  1. 圆角矩形：macOS 图标通常为圆角矩形，圆角半径约为图标宽度的 22.5%
  2. 避免透明边框：图标内容应填满画布，不要留过多的透明边距
  3. 简洁明了：小尺寸（16×16, 32×32）下仍需清晰可辨
  4. 一致性：遵循 macOS Human Interface Guidelines 的设计风格

在 Xcode 项目中使用 ​

生成 .icns 文件后，在 Xcode 中使用：

  1. 将 icon.icns 拖入项目的 Assets.xcassets 或资源目录
  2. 或者在 Info.plist 中配置 CFBundleIconFile 键值为 icon
  3. 对于 macOS 10.14+，建议使用 Assets.xcassets 中的 AppIcon 资源集，直接拖入各尺寸图片即可

常见问题 ​

1. iconutil 报错 "Invalid iconset" ​

通常是因为 .iconset 文件夹中的文件命名不符合规范。必须严格使用以下命名格式：

icon_<width>x<height>.png
icon_<width>x<height>@2x.png

2. 生成的图标模糊 ​

确保源图片分辨率足够高（至少 1024×1024），且为透明背景的 PNG 格式。

3. sips 命令找不到 ​

sips 是 macOS 系统自带的工具，如果找不到，请检查是否在 macOS 环境下运行。

最近更新