Electron Forge自定义图标不显示问题求助

核心问题定位 #

你的配置存在路径可靠性、图标文件规范、平台适配三个关键问题，以下是针对性修复步骤：

1. 修复packagerConfig.icon的路径与平台适配 #

process.cwd()依赖执行命令的目录，打包后路径会失效，改用__dirname指向配置文件所在目录；同时需根据平台指定对应图标文件，而非仅指向文件夹：

packagerConfig: {
  icon: path.join(
    __dirname, 
    'icon', 
    process.platform === 'darwin' ? 'icon.icns' : 
    process.platform === 'win32' ? 'icon.ico' : 'icon.png'
  )
},

Electron Packager会自动识别对应平台的图标格式，明确指定文件名比指向文件夹更可靠。

2. 确保macOS .icns 文件生成规范 #

你提到仅窗口顶部显示16x16图标，大概率是.icns文件生成不规范。正确步骤：

• 创建icon.iconset文件夹，放入以下命名规范的PNG文件：

  icon_16x16.png
  icon_16x16@2x.png  // 32x32
  icon_32x32.png
  icon_32x32@2x.png  // 64x64
  icon_128x128.png
  icon_128x128@2x.png // 256x256
  icon_256x256.png
  icon_256x256@2x.png // 512x512
  icon_512x512.png
  icon_512x512@2x.png // 1024x1024（可选，提升Retina显示）
  

• 执行命令生成.icns：

  iconutil -c icns icon.iconset
  

  替换原有的icon.icns文件，确保图标包含所有必需尺寸。

3. 修复本地运行与打包后的窗口图标路径 #

main.ts中process.cwd()在打包后会指向应用沙盒目录，需改用app.getAppPath()适配打包后的路径：

import { app } from 'electron';
// ...
const mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  icon: path.join(
    app.isPackaged ? path.dirname(app.getAppPath()) : process.cwd(),
    'icon',
    process.platform === 'darwin' ? 'icon.icns' : 
    process.platform === 'win32' ? 'icon.ico' : 'icon.png'
  ),
  // ...其他配置
});

app.isPackaged判断是否为打包状态，分别使用对应路径。

4. 清理缓存后重新打包 #

旧缓存可能导致图标未更新，执行以下命令清理后重新构建：

# 清理Electron Forge缓存
npm run clean
# 删除输出目录与缓存文件夹
rm -rf out/ node_modules/.cache/
# 重新打包
npm run make

5. 验证DMG图标配置 #

MakerDMG的icon是DMG窗口的图标，应用本身的图标由packagerConfig.icon控制，确保packagerConfig中的.icns路径正确后，DMG中的应用图标会自动替换为自定义图标。

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