如何为Electron / Atom Shell App设置应用程序图标

Question

如何为Electron应用程序设置应用程序图标？

我正在尝试BrowserWindow({icon:'path/to/image.png'});但它不起作用。

我是否需要打包应用才能看到效果？

Answer 1

在创建icon时设置BrowserWindow属性仅对Windows和Linux有影响。

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

对于OS X，它需要采用.icns格式。有一个online icon converter可以从你的.png创建这个文件。

Answer 2

以下是我的解决方案：

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

Answer 3

你也可以为macOS做这件事。好的，不是通过代码，而是通过一些简单的步骤：

1. 找到要使用的.icns文件，将其打开并通过“编辑”菜单进行复制
2. 找到electron.app，通常在node_modules / electron / dist中
3. 打开信息窗口
4. 选择左上角的图标（周围的灰色边框）
5. 通过cmd + v粘贴图标
6. 在开发过程中享受您的图标:-)

实际上这是一个不特定于电子的一般事物。您可以更改这样的许多macOS应用程序的图标。

Answer 4

电子建设者supports icons

Answer 5

如果要更新任务栏中的应用程序图标，请在main.js中更新以下内容（如果使用typescript然后是main.ts）

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

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

Answer 6

请注意，图标文件路径的示例倾向于假设main.js位于基目录下。如果该文件不在应用程序的基本目录中，则路径规范必须考虑该事实。

例如，如果main.js位于src /子目录下，并且图标位于assets / icons /下，则此图标路径规范将起作用：

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