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

Posted 2023-03-22

技术标签:

【中文标题】如何为 Electron / Atom Shell App 设置应用程序图标【英文标题】：How to set app icon for Electron / Atom Shell App 【发布时间】：2015-10-10 08:37:25 【问题描述】：

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

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

是否需要打包app才能看到效果？

【问题讨论】：

你可以关注github.com/onmyway133/blog/issues/66 您可以为 Mac 做的一件事是在您的项目中添加一个 postinstall 脚本，该脚本将自动将 .icns 文件复制到 node_modules/ 下。 【参考方案1】：

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

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

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

【讨论】：

你能把这个答案改成在 Windows 上准确吗？一开始可以，但后来我将可分发的应用程序发送给我的朋友，但它没有用！有什么想法吗？ @Nick 你需要做类似下面的事情electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico" 使用 electron-packager，您需要执行“--icon=src/assets/icons/logo”之类的操作，electron 将处理为相关平台添加扩展 @PedroPovedaQ 的解决方案有效（我检查了源代码，您不需要指定扩展名），但我不得不调用 touch builddir/myapp.app 以在我的 Finder 中查看图标.似乎 MacOS 需要帮助才能看到新图标。见gist.github.com/fabiofl/5873100#gistcomment-1320553【参考方案2】：

以下是我的解决方案：

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

【讨论】：

值得一提的是 __dirname 是您的 /src/ 文件夹的路径（即您的 app.js/main.js 文件的文件夹）。 .icns 不需要？如何创建.ico文件，有没有在线工具？ @EdisonPebojot 在 google 上搜索“在线 ico 创建者”有很多 ico 创建者。【参考方案3】：

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

【讨论】：

【参考方案4】：

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

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

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

实际上它是一个普遍的东西，不是特定于电子的。您可以像这样更改许多 macOS 应用程序的图标。

【讨论】：

这太棒了，谢谢你。我确实需要拖放才能让它工作，但仍然很棒。完整说明：support.apple.com/kb/PH25383?locale=en_US 这似乎只适用于开发。当我运行 'yarn dist' 时，icns 文件被替换为默认的电子文件。 @Dave 其实他说的是6. Enjoy your icon during *development* :-) 好吧，伙计们......我知道......但是这个修复已经超过 2 年...... ;-) 顺便说一句。您应该也可以在最终版本上使用此“hack”，因为您只需在 dist 应用程序上更改它...暂时没有尝试过..谁知道现在可能有官方方式... ;-)【参考方案5】：

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

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

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

【讨论】：

确定 mac 吗？【参考方案6】：

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

在我的情况下它有效！

【讨论】：

【参考方案7】：

就我而言，我不需要指定任何路径，例如./，因为我使用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

【讨论】：

【参考方案8】：

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

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

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

【讨论】：

【参考方案9】：

电子包装器

创建BrowserWindow 时设置图标属性仅对Windows 和Linux 平台有效。您必须将 .icns 打包为最大

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

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

电子制造商

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

build

.icns

icon.icns

electron-builder --dir

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

注意：给出的答案适用于electron-builder 的最新版本，并使用 electron-builder v21.2.0 进行了测试

【讨论】：

【参考方案10】：

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

const path = require('path')

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

【讨论】：

【参考方案11】：

对于 Windows 使用 Resource Hacker

下载并安装：:D

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

运行它选择打开并选择exe文件在您的左侧打开一个名为 Icon Group 的文件夹右键1:1033 点击替换图标选择您喜欢的图标然后选择替换图标保存然后关闭

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

【讨论】：

以上是关于如何为 Electron / Atom Shell App 设置应用程序图标的主要内容，如果未能解决你的问题，请参考以下文章

如何为 Electron 重建原生 npm 模块？

使用 Electron (Atom Shell) 时的客户端/服务器模型是啥？

在 Electron (Atom Shell) 应用程序中存储用户设置的位置？

Atom Electron - 使用 javascript 关闭窗口

如何为 Electron 应用程序服务 Django

Electron builder - 如何为生产 Windows 可执行文件构建 loadURL

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

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

电子包装器

电子制造商

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