如何为您的Electron应用程序设置应用程序图标?
我尝试了BrowserWindow({icon:'path/to/image.png'});
,但是它不起作用。
我需要打包应用程序以查看效果吗?
仅在Windows和Linux上创建BrowserWindow
时设置icon
属性才会生效。
要在OS X上设置图标,可以使用electron-packager并使用--icon
开关设置图标。
它需要是.icns格式的。有一个在线图标转换器可以从您的.png文件创建此文件。
electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
来完成任务。 - Mateotouch builddir/myapp.app
才能在我的Finder中看到图标。似乎MacOS需要帮助才能看到新图标。
请参见https://gist.github.com/fabiofl/5873100#gistcomment-1320553 - keul以下是我拥有的解决方案:
new BrowserWindow({
width: 800,
height: 600,
icon: __dirname + '/Bluetooth.ico',
})
.icns
不需要吗? - ishandutta2007icon: path.join(__dirname, 'icons/png/256x256.png')
更好。 - Srdjan Milic针对Electron < 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()
中设置图标。win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));
__dirname
是指您的应用程序的根目录(与 package.json
文件相同的目录)。
如果您要将现有的 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
会导致Electron显示相同的错误信息:默认的Electron图标被使用,原因是应用程序图标未设置
。BrowserWindow
时,设置图标属性仅对Windows和Linux平台有效。您必须为max打包.icns文件才能设置图标。
要使用electron-packager
在OS X上设置图标,请使用--icon开关设置图标。
它需要以.icns格式出现在OS X上。有一个在线图标转换器,可以从您的.png文件创建此文件。
--icon
开关的替代方法。以下是您可以执行的操作。
build
的目录,并将.icns
图标放置在该目录中,命名为icon.icns
。electron-builder --dir
运行构建器。您会发现您的应用程序图标将自动从该目录位置拾取并用于封装应用程序。
注意:给定的答案适用于
electron-builder
的最新版本,并已在electron-builder v21.2.0上进行测试。
win = new BrowserWindow({width: 1000, height: 1000,icon: __dirname + '/logo.png'}); //*.png or *.ico will also work
electron-packager . appname--platform=win32 --arch=x64 --overwrite --icon=icons/icon.ico --out=release-builds
postinstall
脚本,它会自动将.icns文件复制到node_modules/下。 - theram