如何为你的电子应用程序设置应用程序图标?
我正在尝试BrowserWindow({icon:'path/to/image.png'});但这并不奏效。
我是否需要打包应用才能看到效果?
如何为你的电子应用程序设置应用程序图标?
我正在尝试BrowserWindow({icon:'path/to/image.png'});但这并不奏效。
我是否需要打包应用才能看到效果?
当前回答
在我的情况下,我不需要指定任何路径,如./,因为我使用构建目录,这是我的配置:
"build": {
"directories":{
"output": "build"
},
"mac": {
"icon": "build/logo.icns"
},
"win": {
"icon": "build/logo.png"
}
}
我发现使用。/logo.png会让电子显示同样的错误:
默认电子图标被使用的原因=应用程序图标没有设置
其他回答
在创建BrowserWindow时设置图标属性仅对Windows和Linux有效。
要在OS X上设置图标,可以使用electronic -packager并使用——icon开关设置图标。
对于OS x,它需要是。icns格式。有一个在线图标转换器可以从你的。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()中设置图标。
如果您正在将现有的web应用程序转换为Electron应用程序,您可以使用以下代码:
const path = require('path')
const mainWindow = new BrowserWindow({
icon: path.join(__dirname, 'favicon.ico'),
})
**
重要的是: 过时的答案,看看其他更新的解决方案
**
你也可以在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相同的目录)。