如何使用electron builder为Electron应用配置多尺寸应用图标

前期准备 #

• 提前生成对应平台的多尺寸图标包：
  • Windows 端需生成包含 16×16、32×32、48×48、64×64、128×128、256×256 尺寸的 .ico 格式图标
  • macOS 端需生成包含 16×16、32×32、64×64、128×128、256×256、512×512、1024×1024 尺寸的 .icns 格式图标
  • Linux 端直接准备对应尺寸的 PNG 图标即可，命名规则为[尺寸].png，比如16x16.png、64x64.png
• 不要直接修改单尺寸 PNG 的后缀名作为图标包，必须用专门工具（比如 macOS 自带的 iconutil、Windows 端的 IconWorkshop 等）封装多尺寸到单个图标文件，否则打包后只会识别单尺寸。

配置步骤 #

你可以在 package.json、electron-builder.yml 或单独的 electron-builder 配置文件中进行配置，以下以 package.json 为例：

通用全局配置 #

直接指定图标文件的公共路径即可，electron-builder 会自动匹配对应平台的图标后缀，读取内部所有尺寸做适配：

{
  "build": {
    "appId": "com.your.appid",
    "icon": "assets/icons/app" // 无需加.ico/.icns后缀，工具会自动识别对应平台的文件
  }
}

分平台独立配置 #

如果需要不同平台单独指定图标路径，可以按以下方式配置：

{
  "build": {
    "win": {
      "icon": "assets/icons/app.ico"
    },
    "mac": {
      "icon": "assets/icons/app.icns"
    },
    "linux": {
      "icon": "assets/icons/" // 直接放PNG图标所在的文件夹即可，工具会自动按文件名识别不同尺寸
    }
  }
}

效果验证 #

打包完成后可验证配置是否生效：

• Windows 端：右键应用文件→属性→快捷方式→更改图标，即可看到图标包内包含的所有尺寸列表
• macOS 端：右键应用→显示简介，选中左上角图标按空格键预览，即可看到不同尺寸的适配效果
• Linux 端：切换文件管理器的图标显示大小，即可看到对应分辨率的图标渲染效果

小提示：如果打包后还是显示模糊，可以先清理 electron-builder 的缓存目录，重新打包即可，避免旧图标缓存干扰验证。

内容的提问来源于stack exchange，提问作者tedGuy