自定义应用图标

本指南的目的是逐步介绍生成和设置应用图标，以及设置安装程序和安装图标的过程。

生成图标

可以使用在线找到的各种转换工具生成图标。建议从 1024x1024px 的图像开始，然后再将其转换为各种尺寸。

支持更高的像素密度

在支持高 DPI 的平台（如 Apple Retina 显示屏）上，可以在图像的基本文件名后附加 @2x 以将其标记为高分辨率图像。例如，如果 icon.png 是具有标准分辨率的普通图像，则 [email protected] 将被视为具有两倍 DPI 强度的更高分辨率图像。

如果要同时支持具有不同 DPI 密度的不同显示器，则可以将不同尺寸的图像放在同一个文件夹中，并使用不带 DPI 后缀的文件名。例如

images/
├── icon.png
├── [email protected]
└── [email protected]

还支持以下 DPI 后缀

@1x、@1.25x、@1.33x、@1.4x、@1.5x、@1.8x、@2x、@2.5x、@3x、@4x 和 @5x。

支持的格式

每个平台的推荐文件格式和图标大小如下

操作系统	格式	大小
macOS	.icns	512x512 像素（Retina 显示屏为 1024x1024）
Windows	.ico	256x256 像素
Linux	.png	512x512 像素

设置应用图标

Windows 和 macOS

可以在 Forge 配置中配置图标路径。

forge.config.js

module.exports = {
  // ...
  packagerConfig: {
    icon: '/path/to/icon' // no file extension required
  }
  // ...
};

Forge 会自动为每个平台添加正确的扩展名，因此不需要在路径末尾附加 .ico 或 .icns。

更新配置后，使用 Make 命令构建项目以生成包含图标的可执行文件。

Linux

必须在 package.json 和 Electron 的主进程中配置图标路径。

forge.config.js

module.exports = {
  // ...
  makers: \[
    {
      name: '@electron-forge/maker-deb',
        config: {
          options: {
            icon: '/path/to/icon.png'
          }
      }
    }
  ]
  // ...
}

在实例化 BrowserWindow 时，还必须加载图标。

main.js（主进程）

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({
  // ...
  icon: '/path/to/icon.png'
})

配置图标路径后，使用 npm run make 构建项目以生成可执行文件。

配置安装程序图标

安装程序通常都有图标！不要忘记在 Forge 配置的 构建器部分 中配置这些图标。

以下是如何执行此操作的示例

// forge.config.js
module.exports = {
  // ...
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        // An URL to an ICO file to use as the application icon (displayed in Control Panel > Programs and Features).
        iconUrl: 'https://url/to/icon.ico',
        // The ICO file to use as the icon for the generated Setup.exe
        setupIcon: '/path/to/icon.ico'
      }
    },
    {
      // Path to a single image that will act as icon for the application
      name: '@electron-forge/maker-deb',
      config: {
        options: {
          icon: '/path/to/icon.png'
        }
      }
    },
    {
      // Path to the icon to use for the app in the DMG window
      name: '@electron-forge/maker-dmg',
      config: {
        icon: '/path/to/icon.icns'
      }
    },
    {
      name: '@electron-forge/maker-wix',
      config: {
        icon: '/path/to/icon.ico'
      }
    }
  ]
  // ...
};

同样，完成图标配置后，不要忘记使用 Make 命令构建项目。

故障排除

操作系统具有图标缓存。如果图标未更新或仍在使用默认图标，建议重置缓存。

刷新图标缓存（Windows）

Windows 将所有应用程序图标缓存在隐藏的图标缓存数据库中。如果您的 Electron 应用图标未显示，则可能需要重建此缓存。要使缓存失效，请使用系统 ie4uinit.exe 实用程序

ie4uinit.exe -show