如何更改ElectronJS应用程序的默认图标？

Question

我刚开始接触electronjs。我希望将Angular应用程序转换为桌面应用程序。虽然我已经成功实现了它，但是问题在于应用程序图标被设置为默认的electron图标，而不是我提供的图标，如下所示：

   win = new BrowserWindow({
    width: 600,
    height: 670,
    icon: `${__dirname}/dist/assets/imgs/logo.png`
  })

我使用资源编辑器在构建应用后更改了图标，但是我需要以正确的方式在构建时更改它。我错过了什么？

- TheCondorIV

Answer 1

我知道我回答这个问题已经晚了，但我仍然会继续。我通过艰难的方式学到了关于应用程序图标的这些东西。我认为通过比较开发和分发阶段可以更好地理解这个主题。

开发阶段

这相当于通过“npm start”运行应用程序。在此阶段，无论您添加什么代码，都无法替换Electron的默认图标。

唯一可能的是将重叠图标放在默认图标之上。但是，这可能不是您要寻找的解决方案，因为它不是一个图标替换而只是一个覆盖层。这就是Icon overlays中所记录的内容。

OP上面的代码实际上是所谓的图标覆盖层的示例。

win = new BrowserWindow({
    width: 600,
    height: 670,
    icon: `${__dirname}/dist/assets/imgs/logo.png`
})

此外，图标覆盖也可以用来替换通知图标。

发行阶段

这与使用以下任一分发框架相同：

- electron-forge - electron-builder - electron-packager 为您的应用程序创建可执行文件（.app / .exe）。在此阶段，您实际上可以替换Electron的默认图标。

例如，在electron-packager中，您可以在打包过程中指定要使用的图标，如下所示：

cd /path/to/app

# Mac (.icns)
npx electron-packager ./ --platform=darwin --icon=/path/to/your-custom-icon.icns

# Windows (.ico)
npx electron-packager ./ --platform=win32 --arch=x64 --icon=/path/to/your-custom-icon.ico

使用 electron-forge 或 electron-builder 是不同的方法。我还没有尝试过它们。

整个重点是……只有在应用程序已经打包时，才能真正替换 Electron 的默认图标。

- Abel Callejo

---

我只想补充一下，使用 electron-builder 时，如果你使用 CRA，它会以某种方式干扰默认图标检测，因此你需要在构建器配置中使用 extends: null 来禁用 react-cra 预设。 - Arkellys

Answer 2

在main.js中指定图标。

win = new BrowserWindow({
 width: 800, 
 height: 600,
 icon: __dirname + '/Icon/Icon.icns'
})

您还可以使用辅助 URL 方法

const path = require('path')
const url = require('url')
const iconUrl = url.format({
 pathname: path.join(__dirname, 'Icon/Icon.icns'),
 protocol: 'file:',
 slashes: true
})

请参考此链接：https://medium.com/fantageek/changing-electron-app-icon-acf26906c5ad

- Pushprajsinh Chudasama

Answer 3

在主进程中，您必须指定图标路径。在Windows中，图标必须是.ico格式，在Mac中则是.icns格式。

const path = require('path')

      mainWindow = new BrowserWindow({
        width: 900,
        height: 700,
        icon: path.join(__dirname, './img/icon.ico');
        }
      })

- Clint Clinton

---

对于Ionic用户来说，这就是方法！ - Cedric Ipkiss

Answer 4

你可以在这里插入一行代码：

WIN = new BrowserWindow = ({
    // ...
    icon: __dirname + '/relative/path/to/your/icon/file'
   // ...
});

- spadletskys

Answer 5

你可以根据你要发布的平台更改图标。

const iconPath = process.platform !== 'darwin'
    ? 'src/assets/icons/favicon.ico'
    : 'src/assets/icons/favicon.icns';

  // Create the browser window.
  win = new BrowserWindow({
    icon: path.join(__dirname, iconPath),
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve) ? true : false,
      contextIsolation: false,  // false if you want to run e2e test with Spectron
      enableRemoteModule: true // true if you want to run e2e test  with Spectron or use remote module in renderer context (ie. Angular)
    },
  });

- Tiebird

Answer 6

如果有人来到这里寻找针对Mac的特定答案，却发现这个方法不起作用，就像我一样，那么他们可能会发现电子文档中的这段代码很有用。将其插入到你的main.js文件中：

app.whenReady().then(() => {
  if (process.platform === 'darwin') { // mac specific
    app.dock.setIcon(__dirname + '/icon.png')
  }
}).then(() => {
  createWindow()
})

- crumbdouglas