如何使用electron-builder更改应用程序图标

Question

我更换了我的应用程序图标，但由于某种原因，我无法更新该图标（目前具有电子图标）。

我使用的相关模块：

 "electron-builder": "5.7.0",
 "electron-prebuilt": "^ 1.4.13"

我的package.json文件：

    "build": {
        "appId": "com.siemens.dmv",
        "asar": true,
        "win": {
          "target": "squirrel",
          "icon": "./build/icon.ico",
          "title": "DigitalManufacturingViewer",
          "msi": true,
          "IconUrl": "data: image / png; base64, 
          AAABAyUAJSshACMLBAAeJRAAAw0VAAYPEQAFJzsAE // (long string)
}

我尝试了几个命令，但都没有成功，有人知道我应该运行哪个命令吗？

- Tom Cohen

---

我已经修改了，谢谢。 - Tom Cohen

你应该将你的图标添加到根目录下的应用程序目录中（而不是构建目录），并只需提供URL，例如app/icons/icon.ico。 - NiranjanK

那我接下来该做什么？ - Tom Cohen

你应该将你的图标制作成.ico文件（用于Windows图标），并将其放置在你的项目中。如果你使用@Nir的示例目录“app/icons/icon.ico”。那么在你的package.json下，你应该将“IconUrl”更改为“icon”，并添加到.ico文件的路径。它应该看起来像这样："win": { "icon": "app/icons/icon.ico" } - Herm Wong

Answer 1

制作 Windows 和 Linux 的 icon.ico，以及 Mac 的 icon.icns，并将它们放置在构建目录中。

从配置文件中删除其他的 "icon" 属性。构建目录是 Electron Builder 默认搜索图标的位置。

另外尝试更新 electron-builder 版本。您使用的版本已经有大约 2 年的历史了。在新版本中，有很多与图标相关的功能和错误修复。

- quantumkv

---

为什么在Linux/Mac中使用的是icon.icns而不是icon.png之类的格式？ - icc97

@icc97 大多数情况下并不重要。您可以使用 icon.png，electron-builder 将在构建过程中自动创建 icns/ico 文件。但这会导致我在 .deb 构建方面遇到了一些问题，因此我不建议使用 ico/icns 文件。 - quantumkv

@icc97 icns 是一个图标集合 - 它实际上是一个包含不同分辨率图标的文件夹，以便您的应用程序图标在不同情况下可以很好地缩放（例如：任务切换器的图标与应用程序出现在finder中的图标等）。这篇文章解释得更详细：https://blog.macsales.com/28492-create-your-own-custom-icons-in-10-7-5-or-later/ - ndtreviv

Answer 2

默认情况下，Electron Builder会在build文件夹中查找资源：

./build/
    background.png
    [e-mail]
    icon.icns
    icon.ico
    icon.png

图标名称在文档中列出: https://www.electron.build/icons

您可以通过以下方式配置构建文件夹路径package.json：

{
  "name": "your-app",
  "version": "0.0.1",
  "build": {
    "files": [
      "custom/directory"
    ],
    "directories": {
      "buildResources": "custom/directory"
    }
  }
}

请确保使用files属性复制文件。如配置文档所述： https://www.electron.build/configuration/configuration#configuration

- Kim T

Answer 3

对于Linux系统，

请将icon.png文件放置在目录/build/icons中。

https://www.electron.build/icons

- Lee