如果你正在使用电子生成器，你可以按照他们的文档如何添加你的应用程序图标。

您可以在电子生成器中指定设置图标的路径。Json5配置文件，例如mac:

/**
 * @see https://www.electron.build/configuration/configuration
 */
{
appId: 'YourAppId',
mac: {
  artifactName: '${productName}_${version}.${ext}',
  target: ['dmg'],
  icon: 'public/logo.png',
 },
}

在创建BrowserWindow时设置图标属性仅对Windows和Linux有效。

要在OS X上设置图标，可以使用electronic -packager并使用——icon开关设置图标。

对于OS x，它需要是。icns格式。有一个在线图标转换器可以从你的。png创建这个文件。

windows 10

electron-packager

electron-packager . appname--platform=win32 --arch=x64 --overwrite --icon=icons/icon.ico --out=release-builds

图标会一直被缓存，所以使用——out标志会有所帮助。

如果你想在任务栏中更新应用图标，那么在main.js中更新(如果使用typescript则是main.ts)

win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));

__dirname指向应用程序的根目录(与package.json相同的目录)。

electron-packager

在创建BrowserWindow时设置图标属性仅对Windows和Linux平台有效。你必须为Max打包。icns

要在OS X上使用电子包装器设置图标，请使用——icon开关设置图标。

对于OS x，它需要是。icns格式。有一个在线图标转换器可以从你的。png创建这个文件。

electron-builder 作为最新的解决方案，我发现了一种替代方案——图标开关。以下是你可以做的。

在项目目录中创建一个名为build的目录，并将图标的.icns放在名为icon.icns的目录中。 执行命令electronic -builder——dir运行builder。

您将发现应用程序图标将自动从该目录位置提取，并在打包时用于应用程序。

注意:给出的答案是针对最新版本的electron-builder，并使用electron-builder v21.2.0进行了测试

如果您正在将现有的web应用程序转换为Electron应用程序，您可以使用以下代码:

const path = require('path')

const mainWindow = new BrowserWindow({
  icon: path.join(__dirname, 'favicon.ico'),
})