mac 桌面应用打包 ICNS 文件实践

ICNS = Apple Icon Image,macOS 原生图标容器格式,后缀 .icns。

核心特点

  1. 它是「容器」,不是单张图片 一个 .icns 文件内部打包多张不同分辨率图标:16、32、48、128、256、512、1024px,同时包含普通屏与 Retina 高倍图。macOS 在 Dock、访达、窗口标题、文件列表会自动选用最合适尺寸,避免缩放模糊。
  2. 用途
  • macOS App 程序图标(Electron、Tauri、Xcode 打包 Mac 软件必备)
  • 自定义文件夹、磁盘图标

对应 Windows 的 .ico,二者不能互相直接通用

打包 Mac 客户端时,需要提供 .icns;Windows 需要 .ico

生成方式

(1) macOS 原生终端(官方标准,推荐)

bash 复制代码
# 创建图标集文件夹(后缀必须 .iconset) 
mkdir -p icon.iconset 

# 批量生成全部标准尺寸 
sips -z 16 16 icon_1024.png --out icon.iconset/icon_16x16.png 
sips -z 32 32 icon_1024.png --out icon.iconset/icon_16x16@2x.png 
sips -z 32 32 icon_1024.png --out icon.iconset/icon_32x32.png 
sips -z 64 64 icon_1024.png --out icon.iconset/icon_32x32@2x.png 
sips -z 128 128 icon_1024.png --out icon.iconset/icon_128x128.png 
sips -z 256 256 icon_1024.png --out icon.iconset/icon_128x128@2x.png 
sips -z 256 256 icon_1024.png --out icon.iconset/icon_256x256.png 
sips -z 512 512 icon_1024.png --out icon.iconset/icon_256x256@2x.png 
sips -z 512 512 icon_1024.png --out icon.iconset/icon_512x512.png 
sips -z 1024 1024 icon_1024.png --out icon.iconset/icon_512x512@2x.png 

# 打包成 icns 
iconutil -c icns icon.iconset 

# 清理临时文件夹(可选) 
rm -rf icon.iconset

(2) Windows -- icon-gen

icon-gen 跨平台,纯 node,生成 icns+ico

css 复制代码
# 全局安装 
npm i -g icon-gen 

# 使用,准备1024×1024透明png 
icon-gen -i icon_1024.png -o ./icons --icns --ico

额外提醒:electron-icon-maker 已经停止维护,目前已不能用。

(3)electron-builder 打包

如果你使用 electron-builder 打包,完全不需要手动生成 icnspackage.json build 配置:

css 复制代码
"build": { 
    "mac": { 
        "icon": "./build/icon_1024.png" 
     }, 
     "win": {
         "icon": "./build/icon_1024.png"
     }
 }

打包时 builder 自动生成 .icns + .ico,Windows 环境直接运行,零额外工具。

相关推荐
萧鼎1 小时前
Python 高性能Web框架神器 FastAPI:自动生成API文、基于Pydant、异步请求处理全搞定
前端·python·fastapi
IT_陈寒2 小时前
Redis误用keys命令把生产环境搞崩了,血的教训
前端·人工智能·后端
计算机魔术师2 小时前
5000亿估值冲刺科创板,DeepSeek 为何急着上市?
前端
我血条子呢2 小时前
前端解析word方案
前端·word
kyriewen3 小时前
我用 AI 写完一个需求后才发现,最难的不是 prompt,而是验收
前端·程序员·ai编程
申行3 小时前
Vue 3 + DYMO Connect Framework 实战:从标签模板到打印服务的完整实现
前端
两只羊ovo3 小时前
Vue 3 + DeepSeek 流式输出实战:从“干等”到“打字机”体验
前端·vue.js
Yeyu3 小时前
车载多 App 同屏渲染(二):SurfaceControlViewHost 跨进程
前端
樊小肆3 小时前
离谱,每轮请求 25% 的 token,竟在重发模型想完就扔的内心独白
前端·人工智能·agent
小妖现世3 小时前
前端面试复习笔记:React 高频题 + JS 手写题
前端