小开

最佳答案

在创建BrowserWindow时设置icon属性仅在Windows和Linux上有效。

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

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

小开

下面是我的解决方案:

new BrowserWindow({
width: 800,
height: 600,
icon: __dirname + '/Bluetooth.ico',
})

小开

**

< h2 >重要: 过时的答案，看看其他更新的解决方案

**

你也可以在macOS上这么做。好的，不是通过代码，而是通过一些简单的步骤:

找到你想要使用的。icns文件，打开它并通过编辑菜单复制它
找到电子。App，通常在node_modules/electron/dist中
打开信息窗口
选择左上角的图标(灰色边框)
通过cmd+v粘贴图标
在开发过程中享受你的图标:-)

实际上，这是一个普遍的现象，并不局限于电子。你可以像这样更改许多macOS应用程序的图标。

小开

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

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

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

小开

请注意，图标文件路径的例子倾向于假设main.js在基本目录下。如果文件不在应用程序的基本目录中，路径规范必须说明这一事实。

例如，如果main.js在src/子目录下，而图标在assets/icons/下，这个图标路径规范将工作:

icon: __dirname + "../assets/icons/icon.png"

小开

电子<3.0版本。更新package.json:

"build": {
"appId": "com.my-website.my-app",
"productName": "MyApp",
"copyright": "Copyright © 2019 ${author}",
"mac": {
"icon": "./public/icons/mac/icon.icns",     <---------- set Mac Icons
"category": "public.app-category.utilities"
},
"win": {
"icon": "./public/icons/png/256x256.png" <---------- set Win Icon
},
"files": [
"./build/**/*",
"./dist/**/*",
"./node_modules/**/*",
"./public/**/*",       <---------- need for get access to icons
"*.js"
],
"directories": {
"buildResources": "public" <---------- folder where placed icons
}
},

在构建应用程序后，您可以看到图标。此解决方案在开发人员模式下不显示图标。我没有在new BrowserWindow()中设置图标

小开

electron-packager

人力资源> < p > < 在创建BrowserWindow时设置图标属性仅在Windows和Linux平台上有效。您必须为Max

打包.icns

要在OS X上使用electron-packager设置图标，请使用——icon开关设置图标。

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

< p >

electron-builder

<人力资源> 作为最新的解决方案，我发现了使用--icon开关的替代方案。你可以这样做。

在你的项目目录中创建一个名为build的目录，并将图标.icns放在名为icon.icns的目录中。
通过执行命令electron-builder --dir运行生成器。

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

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

小开

对于windows使用资源黑客

下载和安装::D

http://www.angusj.com/resourcehacker/

运行它
选择打开并选择exe文件
在你的左边打开一个名为图标组的文件夹
右击1: 1033
点击替换图标
选择您选择的图标
然后选择替换图标
保存并关闭

你应该构建应用程序

小开

win = new BrowserWindow({width: 1000, height: 1000,icon: __dirname + '/logo.png'}); //*.png or *.ico will also work

对我来说，它起作用了!

小开

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

const path = require('path')


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

小开

在我的例子中，我不需要指定任何路径，例如./，因为我使用build目录，这是我的配置:

"build": {
"directories":{
"output": "build"
},
"mac": {
"icon": "build/logo.icns"
},
"win": {
"icon": "build/logo.png"
}
}

我发现使用./logo.png将使电子显示相同的错误:

default Electron icon is used reason=application icon is not set

小开

在Linux中，您可以在项目目录中搜索icon.png，并使用您的自定义图标(具有相同的名称)更改两个文件(一个用于Debian，一个用于Redhat)。

小开

windows 10