2024年Electron桌面应用默认图标修改失败问题求助

问题场景 #

按文档配置修改Electron应用图标，执行npm run make编译后，窗口、桌面快捷方式和系统托盘的自定义图标均失效，仅开发环境下正常显示。

现有配置文件 #

forge.config.js #

const { FusesPlugin } = require("@electron-forge/plugin-fuses");
const { FuseV1Options, FuseVersion } = require("@electron/fuses");

module.exports = {
  packagerConfig: {
    asar: true,
  },
  icon: "images/favicon.ico",
  rebuildConfig: {},
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      config: {
        certificateFile: "./cert.pfx",
        certificatePassword: process.env.CERTIFICATE_PASSWORD,
        authors: "Dev",
        description: "My App",
        setupIcon: "images/favicon.ico",
        icon: "images/favicon.ico",
      },
      platforms: ["win32"],
    },
    {
      name: "@electron-forge/maker-zip",
      platforms: ["darwin"],
    },
    {
      name: "@electron-forge/maker-deb",
      config: {},
    },
    {
      name: "@electron-forge/maker-rpm",
      config: {},
    },
  ],
  plugins: [
    {
      name: "@electron-forge/plugin-auto-unpack-natives",
      config: {},
    },
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

main.js #

const { app, BrowserWindow, Tray, nativeImage } = require("electron");

const createWindow = () => {
  const icon = nativeImage.createFromPath("./favicon.ico");
  const win = new BrowserWindow({
    width: 1600,
    height: 900,
    minWidth: 900,
    minHeight: 600,
    autoHideMenuBar: true,
    webPreferences: {
      devTools: !app.isPackaged,
      nodeIntegration: true,
    },
    icon: icon,
  });

  win.loadURL("https://nbook-app.web.app");
  win.setIcon(icon);
};

app.whenReady().then(() => {
  createWindow();
  const icon = nativeImage.createFromPath("./favicon.ico");
  const tray = new Tray(icon);
  tray.setToolTip("Nbook");
});

if (require("electron-squirrel-startup")) app.quit();

分步解决方案 #

1. 修复运行时图标路径问题 #

打包后应用目录结构变化，相对路径./favicon.ico无法被正确解析。需通过path模块构建绝对路径，兼容开发与打包环境：

修改main.js：

const { app, BrowserWindow, Tray, nativeImage } = require("electron");
const path = require("path");

// 生成兼容环境的图标绝对路径
const getIconPath = () => {
  return app.isPackaged 
    ? path.join(process.resourcesPath, "favicon.ico") // 打包后图标位于resources目录
    : path.join(__dirname, "favicon.ico"); // 开发环境下的相对路径
};

const createWindow = () => {
  const icon = nativeImage.createFromPath(getIconPath());
  const win = new BrowserWindow({
    width: 1600,
    height: 900,
    minWidth: 900,
    minHeight: 600,
    autoHideMenuBar: true,
    webPreferences: {
      devTools: !app.isPackaged,
      nodeIntegration: true,
    },
    icon: icon,
  });

  win.loadURL("https://nbook-app.web.app");
};

app.whenReady().then(() => {
  createWindow();
  const icon = nativeImage.createFromPath(getIconPath());
  const tray = new Tray(icon);
  tray.setToolTip("Nbook");
});

if (require("electron-squirrel-startup")) app.quit();

2. 修正Electron Forge的图标配置 #

• 主应用图标需配置在packagerConfig内，顶层icon字段部分版本不生效
• 配置图标时无需加.ico后缀，Forge会自动识别对应格式文件
• Squirrel安装器需添加iconUrl字段，确保安装过程中能读取到图标

修改后的forge.config.js：

const { FusesPlugin } = require("@electron-forge/plugin-fuses");
const { FuseV1Options, FuseVersion } = require("@electron/fuses");
const path = require("path");

module.exports = {
  packagerConfig: {
    asar: true,
    icon: path.join(__dirname, "images/favicon") // 去掉.ico后缀，使用绝对路径更可靠
  },
  rebuildConfig: {},
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      config: {
        certificateFile: "./cert.pfx",
        certificatePassword: process.env.CERTIFICATE_PASSWORD,
        authors: "Dev",
        description: "My App",
        setupIcon: path.join(__dirname, "images/favicon.ico"),
        iconUrl: `file://${path.resolve(__dirname, "images/favicon.ico")}`,
        icon: path.join(__dirname, "images/favicon")
      },
      platforms: ["win32"],
    },
    {
      name: "@electron-forge/maker-zip",
      platforms: ["darwin"],
    },
    {
      name: "@electron-forge/maker-deb",
      config: {},
    },
    {
      name: "@electron-forge/maker-rpm",
      config: {},
    },
  ],
  plugins: [
    {
      name: "@electron-forge/plugin-auto-unpack-natives",
      config: {},
    },
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

3. 图标文件规范检查 #

• 确保images/favicon.ico是多尺寸标准ICO文件，需包含16x16、32x32、48x48、256x256等尺寸（可通过工具将PNG转换为符合要求的ICO）
• 打包前清理旧构建产物：删除项目根目录下的out文件夹，避免缓存影响

4. 验证打包流程 #

执行以下命令重新打包：

# Windows系统使用 rmdir /s out
rm -rf out
npm run make

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