Electron Forge打包时应用图标设置失败问题求助

核心问题分析 #

开发环境图标正常但打包后失效，本质是路径环境差异、资源未被打包、平台图标格式要求不匹配这三个问题导致的，以下是分步解决方法：

1. 确保静态资源被打包进应用 #

Electron Forge 默认不会自动打包非源码目录（比如你的images文件夹），需要在forge.config.ts中明确配置打包文件范围：

const config: ForgeConfig = {
  packagerConfig: {
    icon: 'images/icon', // 无需加后缀，Electron会自动匹配平台对应格式
    files: [
      'src/**/*',
      'images/**/*' // 强制打包images目录下所有资源
    ]
  },
  // ...其他配置
};

2. 匹配不同平台的图标格式要求 #

不同系统对应用图标格式有强制要求，只提供png会导致Windows/macOS打包异常：

• Windows：必须使用.ico格式（准备images/icon.ico）
• macOS：必须使用.icns格式（准备images/icon.icns）
• Linux：支持.png格式
• 配置packagerConfig.icon: 'images/icon'即可，Electron会根据当前打包平台自动选择对应后缀的文件

3. 修复 MakerSquirrel 的安装包图标错误 #

Windows Squirrel 安装器要求setupIcon必须是.ico格式，且路径要对应项目根目录下的文件：

makers: [
  new MakerSquirrel({
    setupIcon: 'images/icon.ico' // 必须指定ico文件，不能用png
  }),
  // ...其他maker配置
]

如果没有icon.ico文件，会直接触发Fatal error: Unable to set icon错误。

4. 统一窗口与托盘图标的路径写法 #

开发环境的相对路径（../images/icon.png）在打包后会失效，必须用app.getAppPath()结合path模块动态生成路径，兼容开发/打包两种环境：

import { app, BrowserWindow, nativeImage } from 'electron';
import path from 'path';

function createWindow() {
  // 生成窗口图标路径
  const windowIconPath = path.join(app.getAppPath(), 'images', 'icon.png');
  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
    icon: windowIconPath,
  });
}

app.whenReady().then(() => {
  createWindow();
  // 生成托盘图标路径
  const trayIconPath = path.join(app.getAppPath(), 'images', 'icon.png');
  const image = nativeImage.createFromPath(trayIconPath);
  image.setTemplateImage(true);
  new TrayMenu(trayIconPath);
});

5. 验证路径正确性（可选） #

可以在代码中添加日志，确认打包后资源路径是否正确：

console.log('应用根路径:', app.getAppPath());
console.log('窗口图标路径:', windowIconPath);

• Windows：通过命令行运行打包后的exe文件查看日志
• macOS：打开应用的控制台查看输出

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