147

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

我正在尝试，BrowserWindow({icon:'path/to/image.png'});但是没有用。

我需要打包应用程序才能看到效果吗？

icons electron

— 乔E.
source

您可以关注github.com/onmyway133/blog/issues/66

— onmyway133 '17

对于Mac，您可以做的一件事是postinstall在您的项目中放置一个脚本，该脚本将自动将.icns文件复制到node_modules /下。

— Theram

164

icon在创建BrowserWindow唯一属性时设置属性会影响Windows和Linux。

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

对于OS X，它必须为.icns格式。有一个在线图标转换器，可以从您的.png创建此文件。

— 亚历克斯·沃伦
source

5

将BrowserWindow上的图标设置为.PNG文件将显示在Windows的任务栏中。可以在我的博客上找到一个其工作示例：mylifeforthecode.com/…可能是该路径必须是绝对路径才能工作，因为我将其设置为__dirname +'path / to / icon.png'。但是，要为.exe设置图标，您将需要使用电子打包程序或资源黑客。

— 肖恩·拉科夫斯基

您能否将这个答案正确设置为Windows？

— 安娜·贝茨

感谢@ShawnRakowski，您是对的-我刚刚测试了这一点，并且icon属性确实在Windows上也可以使用。我已经更新了答案以反映这一点。

— 亚历克斯·沃伦

1

这项工作起初很有效，但后来我将可分发的应用程序发送给了我的朋友，但没有成功！有任何想法吗？

— 2013年

10

@Nick，您需要执行以下操作electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"

— Mateo

47

以下是我的解决方案：

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

— Sh4m
source

18

值得一提的是__dirname是/ src /文件夹（即app.js / main.js文件的文件夹）的路径。

— 康斯坦丁

.icns没有必要？

— ishandutta2007 2007年

20

您也可以在macOS上执行此操作。好的，不是通过代码，而是通过一些简单的步骤：

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

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

— 亚历克斯
source

6

太神奇了，谢谢你。我确实需要拖放才能使其正常工作，但仍然令人赞叹。

— 罗伯特·马森

完整说明：support.apple.com/kb/PH25383?

— locale=zh_CN

这似乎仅对发展有效。当我运行“ yarn dist”时，icns文件将替换为默认的电子1。

— 戴夫

2

@戴夫其实他说6. Enjoy your icon during *development* :-)

— 米娅

好的...我知道...但是这个解决方法已经超过2年了... ;-)和顺便说一句。您应该也可以在最终版本中使用此“ hack”，因为您只需在dist应用程序上对其进行更改即可。...已经有一段时间没有尝试了。 ;-)

— alexrjs '19

12

更新了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）
source

1

电子生成器支持图标

— 罗夫堡
source

1

如果要更新任务栏中的应用程序图标，请在main.js中更新以下内容（如果使用打字稿，则使用main.ts）

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

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

— 哈里·达斯
source

确定要Mac吗？

— Anil8753

0

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

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

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

— 乔武
source

0

电子包装机

在BrowserWindow仅创建图标时设置icon属性对Windows和Linux平台有影响。您必须将.icns打包为max

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

对于OS X，它必须为.icns格式。有一个在线图标转换器，可以从您的.png创建此文件。

电子生成器

作为最新的解决方案，我找到了使用--icon开关的替代方法。这是您可以做的。

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

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

注意：给出的答案适用于最新版本，electron-builder并已通过电子制造商v21.2.0进行了测试

— 基兰·马尼亚（Kiran Maniya）
source

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

电子包装机

电子生成器