如何为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

更新了 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()中设置图标。

Answer 5

电子生成器supports icons

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

电子包装机

---

在创建<ng-container formArrayName="groundUses" *ngFor="let data of formGroundUse.controls['groundUses']?.controls; let i = index"> <tr [formGroup]="groundUses.controls[i]"> <!-- *ngFor="let data of tableData"> --> <td class="table-subtitle">{{data.title}} {{i}}</td> <td class="input-container"> <label for="">Área (Ha)</label> <!-- formControlName="{{data.title}}" --> <input type="text" [disabled]="!technicalData.edit" class="form-input" [value]="data.value" (change)="updateItem($event)" formControlName="value"> </td> <td>{{data.percentage}}</td> </tr> </ng-container> 时设置图标属性仅对Windows和Linux平台有效。您必须将.icns打包为最大

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

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

电子生成器

---

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

1. 在项目目录中创建一个名为--icon的目录，并将build图标放在名为.icns的目录中。
2. 通过执行命令icon.icns运行构建器。

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

  

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

Answer 9

对于Windows，请使用Resource Hacker

下载并安装：：D

http://www.angusj.com/resourcehacker/

• 运行
• 选择打开并选择exe文件
• 在左侧打开一个名为图标组
的文件夹
• 右键单击 1：1033
• 点击替换图标
• 选择所需的图标
• 然后选择替换图标
• 保存然后关闭

您应该已经构建了应用程序

Answer 10

win = new BrowserWindow({width: 1000, height: 1000,icon: __dirname + '/logo.png'}); //*.png or *.ico will also work 

在我看来，它奏效了！

Answer 11

如果您要将现有的网络应用程序转换为 Electron 应用程序，您可以使用以下代码：

const path = require('path')

const mainWindow = new BrowserWindow({
  icon: path.join(__dirname, 'favicon.ico'),
})