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

Question

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

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

需要打包才能看到效果吗？

Answer 1

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

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

它需要为 OS X 的 .icns 格式。有一个 online icon converter 可以从您的 .png 创建此文件。

Answer 2

以下是我的解决方案：

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

Answer 3

**

重要提示：过时的答案，看看其他较新的解决方案

**

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

找到您要使用的.icns 文件，打开它并通过编辑菜单复制它
找到electron.app，通常在node_modules/electron/dist
打开资料window
Select 左上角的图标（灰色边框）
通过cmd+v粘贴图标
在开发过程中享受您的图标:-)

其实是笼统的东西，不针对electron。您可以像这样更改许多 macOS 应用程序的图标。

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

已更新 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 7

电子包装商

创建 BrowserWindow 时设置图标属性仅对 Windows 和 Linux 平台有效。你必须打包 .icns for max

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

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

电子制造商

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

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

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

Note: The given answer is for recent version of electron-builder and tested with electron-builder v21.2.0

Answer 8

windows 使用 Resource Hacker

下载并安装：:D

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

运行它
Select 打开并 select exe 文件
在您的左侧打开名为 Icon Group
右击1:1033
单击替换图标
Select您选择的图标
然后select替换图标
保存然后关闭

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

Answer 9

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

在我的案例中它起作用了！

Answer 10

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

const path = require('path')

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

Answer 11

在我的例子中，我不需要指定任何路径，例如 ./，因为我使用 build 目录，这是我的配置：

"build": {
  "directories":{
     "output": "build"
  },
  "mac": {
     "icon": "build/logo.icns"
  },
  "win": {
     "icon": "build/logo.png"
   }
}

我发现使用./logo.png会让electron显示同样的错误：

default Electron icon is used reason=application icon is not set

Answer 12

在 Linux 中，您可以在项目目录中搜索 icon.png 并使用自定义图标（同名）更改两个文件（一个用于 Debian，一个用于 Redhat）。

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

How to set app icon for Electron / Atom Shell App

icons

electron

重要提示： 过时的答案，看看其他较新的解决方案

电子包装商

电子制造商

重要提示：过时的答案，看看其他较新的解决方案