Electron+Angular应用无法修改生成的.exe文件图标求助

核心问题梳理 #

你当前的问题在于混淆了窗口标题栏图标和打包后.exe文件图标的设置逻辑：

• main.js中BrowserWindow的icon参数仅控制应用窗口的标题栏图标
• 打包后的.exe图标需要通过打包工具（electron-packager）的参数指定，且Windows平台对图标格式有严格要求

具体修复步骤 #

1. 生成符合Windows要求的.ico图标 #

Windows平台的exe图标必须是包含多尺寸的.ico文件（仅32x32的.ico无法满足系统所有场景的显示需求），你需要将256x256的logo.png转换成包含以下尺寸的.ico文件：

• 16x16（任务栏小图标）
• 32x32（桌面图标、资源管理器中等尺寸）
• 64x64、128x128、256x256（大图标显示场景）

可通过本地工具（如IconWorkshop）或免费在线转换工具生成符合要求的.ico文件。

2. 修改打包脚本参数 #

修改package.json中的package-win脚本，注意以下要点：

• 指定.ico格式的图标文件（Windows平台不支持直接用.png作为exe图标）
• 添加--overwrite参数强制覆盖缓存（避免旧图标残留）
• 确保图标路径相对于项目根目录正确

修改后的脚本：

"package-win": "npm run clean-packager && npx electron-packager ./ embolic-tools --platform=win32 --icon=src/assets/logo.ico --overwrite"

3. 彻底清理缓存 #

执行打包前，除了运行clean-packager，还要手动清理以下缓存：

• 删除项目根目录下的embolic-tools-win32-x64文件夹
• 删除node_modules/.cache目录（electron-packager的临时缓存文件夹）

4. 验证窗口图标设置（可选） #

如果需要同时修改窗口标题栏图标，确保main.js中的路径正确，建议统一使用.ico文件：

icon: path.join(__dirname, "src/assets/logo.ico"),

验证步骤 #

1. 运行 npm run clean-dist && ng build 重新构建Angular项目
2. 运行 npm run package-win 执行打包
3. 打开生成的embolic-tools-win32-x64文件夹，查看.exe文件的图标是否已更新

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