mac下生成.icns图标

1 .icns是啥？

1.1 找到一个.icns

打开访达 >> 应用程序
随便选取一个.app（例如App Store.app），右键菜单点击显示包内容
找到Contents/Resources/AppIcons.icns

1.2 看看.icns里有什么

将1.1找到的的AppIcon.icns用Mac自带的预览应用打开，如下图

我的Mac系统是macOS Big Sur 11.2.1，可以看到内部有4个元素，我们逐个将它们导出，比如说/users/xxx/desktop/Logo（后文涉及到执行终端命令的，默认都是在这个路径下操作，不再重复说明）。

选中1个元素，右键菜单点击导出为
在弹窗中选择导出路径、格式（我一般选PNG，并勾选Alpha透明通道）
点击存储

找到导出的文件，查看文件信息，如下图。可以看到，关键信息是分辨率、尺寸，这在后面讲生成.icns时要用到。

通过上面的方法，可以知道这4个导出文件的关键信息分别是

尺寸	分辨率
256x256	144x144
128x128	72x72
32x32	144x144
16x16	72x72

分辨率是不是有点@2x的意思？关于Mac的屏幕特性，与本文主题关系不大，这里不再赘述。

2 制作一个.icns

2.1 生成所需的一组.png图片

先准备一张尺寸1024x1024、分辨率144x144的原始图片，如下图（我用的是终端导出的png，并经过反相处理）

用原始图片做素材，生成一组特定尺寸&分辨率的png图片，可以用Mac自带的预览应用，也可以用PS，这里介绍用终端命令的方法。

生成新图片用到的命令介绍：

# 命令格式：sips -z 新图片宽度 新图片高度 原图片名 --out 临时.iconset/新图片完整名
# 举个栗子：sips -z 32 32 pic.png --out tmp.iconset/1.png

网上一般会推荐生成下面10张图片，可能是基于比较旧版本的macOS原因？

# 全部拷贝到命令行回车执行，执行结束之后去tmp.iconset查看十张图片是否生成好
sips -z 16 16     pic.png --out tmp.iconset/icon_16x16.png
sips -z 32 32     pic.png --out tmp.iconset/icon_16x16@2x.png
sips -z 32 32     pic.png --out tmp.iconset/icon_32x32.png
sips -z 64 64     pic.png --out tmp.iconset/icon_32x32@2x.png
sips -z 128 128   pic.png --out tmp.iconset/icon_128x128.png
sips -z 256 256   pic.png --out tmp.iconset/icon_128x128@2x.png
sips -z 256 256   pic.png --out tmp.iconset/icon_256x256.png
sips -z 512 512   pic.png --out tmp.iconset/icon_256x256@2x.png
sips -z 512 512   pic.png --out tmp.iconset/icon_512x512.png
sips -z 1024 1024   pic.png --out tmp.iconset/icon_512x512@2x.png

毕竟参照macOS Big Sur 11.2.1的.icns内部情况，下面4张已经可以满足需求了

sips -z 16 16 pic.png --out tmp.iconset/16x16.png
sips -z 32 32 pic.png --out tmp.iconset/32x32.png
sips -z 128 128 pic.png --out tmp.iconset/128x128.png
sips -z 256 256 pic.png --out tmp.iconset/256x256.png

2.2 用.iconset生成.icns

用iconutil命令从一组图片生成.icns

# 命令格式：iconutil -c icns 临时.iconset -o 名字.icns
# 举个栗子：iconutil -c icns tmp.iconset -o logo.icns

最终效果如下图

后记

long time ago，制作.icns需要Icon Composer，而又是集成在Xcode内的；
后来，Xcode不再内置Icon Composer，需要通过Xcode->Open Develop Tool->More Develop Tools->下载GraphicsTools，里面会包含Icon Composer；
而现在，还是用终端命令比较简单方便；

技术是需要与时俱进、不断更新的。
我们自己也是。