如何为您的Electron应用程序设置应用程序图标？
我尝试了BrowserWindow({icon:'path/to/image.png'});，但是它不起作用。
我需要打包应用程序以查看效果吗？
15个回答
219
仅在Windows和Linux上创建BrowserWindow时设置icon属性才会生效。
要在OS X上设置图标，可以使用electron-packager并使用--icon开关设置图标。
它需要是.icns格式的。有一个在线图标转换器可以从您的.png文件创建此文件。
- Alex Warren
10
谢谢@ShawnRakowski，你是对的——我刚刚测试过，图标属性在Windows上确实有效。我已经更新了我的答案来反映这一点。 - Alex Warren
1这起初是有效的，但是我将可分发的应用程序发送给我的朋友后，它就无法工作了！有什么想法吗？ - Chet
14@Nick，你需要执行类似以下的操作
electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico" 来完成任务。 - Mateo1使用electron-packager，您需要执行类似于“--icon=src/assets/icons/logo”的操作，然后electron会处理添加相关平台的扩展名。 - PedroPovedaQ
1@PedroPovedaQ的解决方案可行（我检查了源代码，您不需要指定扩展名），但我被迫调用
touch builddir/myapp.app才能在我的Finder中看到图标。似乎MacOS需要帮助才能看到新图标。
请参见https://gist.github.com/fabiofl/5873100#gistcomment-1320553 - keul显示剩余5条评论
96
以下是我拥有的解决方案：
new BrowserWindow({
width: 800,
height: 600,
icon: __dirname + '/Bluetooth.ico',
})
- Sh4m
6
28值得一提的是，__dirname 是你的 /src/ 文件夹的路径（即你的 app.js/main.js 文件所在的文件夹）。 - Konstantin
2
.icns 不需要吗？ - ishandutta2007如何创建.ico文件？有没有在线工具可用？ - Edison Pebojot
1@EdisonPebojot 在谷歌上搜索“在线ICO创建器”，有很多ICO创建器。 - Sh4m
3IntelliJ 建议写成：
icon: path.join(__dirname, 'icons/png/256x256.png') 更好。 - Srdjan Milic这个解决方案在macOS上似乎不起作用。 - Jeff Pal
35
针对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()中设置图标。- Andrey Patseiko
1
2自3.0版本起，应用程序包package.json中的'build'不再受支持。 - S.B.
22
重要提示：
过时的答案，请查看其他更新的解决方案
您也可以在macOS上进行操作，不过不是通过代码，而是通过一些简单的步骤：
- 找到您想使用的.icns文件，打开它并通过编辑菜单将其复制
- 找到electron.app，通常在node_modules/electron/dist目录下
- 打开信息窗口
- 选择左上角的图标（周围有灰色边框）
- 通过cmd+v粘贴图标
- 享受您在开发过程中使用的图标 :-)
实际上这是一个普遍的事情，不仅适用于electron。您可以像这样更改许多macOS应用程序的图标。
- alexrjs
5
6太惊人了，感谢你的帮助。我确实需要拖放才能使其正常工作，但仍然非常棒。 - Robert Masen
完整指南：https://support.apple.com/kb/PH25383?locale=en_US - Johann
这似乎只适用于开发环境。当我运行“yarn dist”时，icns文件会被默认的Electron文件替换。 - Dave
3@Dave，实际上他说“6. 在开发期间享受您的图标 :-)”。 - Mia
嗨，伙计们...我知道...但这个修复已经超过2年了...;-) 顺便说一下，你应该能够在最终版本上使用这个“hack”，因为你只需要在分发的应用程序上进行更改...我有一段时间没有尝试过了...而且谁知道现在可能有官方的方法了...;-) - alexrjs
4
如果想要更新任务栏中的应用程序图标，则需在main.js (如果使用typescript则为main.ts)中进行以下更新。
win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));
__dirname 是指您的应用程序的根目录（与 package.json 文件相同的目录）。
- Hari Das
1
1你确定是Mac吗？ - Anil8753
4
如果您要将现有的 Web 应用转换为 Electron 应用程序，则可以使用以下代码：
const path = require('path')
const mainWindow = new BrowserWindow({
icon: path.join(__dirname, 'favicon.ico'),
})
- Wenfang Du
2
在我的情况下，我不需要指定任何路径，例如
我发现使用
./，因为我使用build目录，这是我的配置："build": {
"directories":{
"output": "build"
},
"mac": {
"icon": "build/logo.icns"
},
"win": {
"icon": "build/logo.png"
}
}
我发现使用
./logo.png会导致Electron显示相同的错误信息：默认的Electron图标被使用，原因是应用程序图标未设置。- Darryl RN
1
electron-packager
当创建
BrowserWindow时，设置图标属性仅对Windows和Linux平台有效。您必须为max打包.icns文件才能设置图标。
要使用electron-packager在OS X上设置图标，请使用--icon开关设置图标。
它需要以.icns格式出现在OS X上。有一个在线图标转换器，可以从您的.png文件创建此文件。
electron-builder
作为最新的解决方案，我发现了使用
--icon开关的替代方法。以下是您可以执行的操作。
- 在项目目录中创建一个名为
build的目录，并将.icns图标放置在该目录中，命名为icon.icns。 - 通过执行命令
electron-builder --dir运行构建器。
您会发现您的应用程序图标将自动从该目录位置拾取并用于封装应用程序。
注意：给定的答案适用于
electron-builder的最新版本，并已在electron-builder v21.2.0上进行测试。
- Kiran Maniya
1
win = new BrowserWindow({width: 1000, height: 1000,icon: __dirname + '/logo.png'}); //*.png or *.ico will also work
在我的情况下它起作用了！
- KISHLAY KUMAR
1
windows 10
electron-packager
electron-packager . appname--platform=win32 --arch=x64 --overwrite --icon=icons/icon.ico --out=release-builds
图标一直被缓存，所以使用 --out 标志有所帮助。
- Subramanya Rao
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
postinstall脚本，它会自动将.icns文件复制到node_modules/下。 - theram