Custom App Icons自定义应用程序图标

The purpose of this guide is to walk through the process of generating and setting an app icon, as well as setting installer and setup icons.本指南旨在介绍生成和设置应用程序图标以及设置安装程序和设置图标的过程。

Generating an icon生成图标

Generating your icon can be done using various conversion tools found online. 生成您的图标可以使用在线找到的各种转换工具来完成。It is recommended to start with a 1024x1024px image before converting it to various sizes.建议先从1024x1024px图像开始，然后再将其转换为各种大小。

Supporting higher pixel densities支持更高的像素密度

On platforms that have high-DPI support (such as Apple Retina displays), you can append @2x after the image's base filename to mark it as a high resolution image. 在支持高DPI的平台上（如Apple Retina显示器），您可以在图像的基本文件名后附加@2x，将其标记为高分辨率图像。For example, if icon.png is a normal image with standard resolution, then icon@2x.png will be treated as a high resolution image that has double the DPI intensity.例如，如果icon.png是具有标准分辨率的普通图像，那么icon@2x.png将被视为具有双倍DPI强度的高分辨率图像。

If you want to support different displays with different DPI densities at the same time, you can put images with different sizes in the same folder and use the filename without DPI suffixes. 如果您想同时支持不同DPI密度的不同显示器，可以将不同大小的图像放在同一文件夹中，并使用不带DPI后缀的文件名。For example:例如：

images/
├── icon.png
├── icon@2x.png
└── icon@3x.png

Supported formats支持格式

The recommended file formats and icon sizes for each platform are as follows:每个平台的推荐文件格式和图标大小如下：

Setting the app icon设置应用程序图标

Windows and macOSWindows和macOS

Configuring the path to your icon can be done in your Forge configuration.配置图标的路径可以在Forge配置中完成。

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

After the config has been updated, build your project to generate your executable with the Make command.配置更新后，使用Make命令构建项目以生成可执行文件。

Linux

Configuring the path to your icon must be done in both package.json as well as in Electron's main process.配置图标的路径必须在package.json和Electron的主进程中完成。

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

The icon must be additionally loaded when instantiating your BrowserWindow.在实例化BrowserWindow时，必须额外加载该图标。

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

Once the path to the icon has been configured, build your project to generate your executable with either yarn make or npm run make.一旦配置了图标的路径，就可以构建您的项目，用yarn make或npm run make生成可执行文件。

Configuring installer icons配置安装程序图标

Installers usually have icons! Don't forget to configure those in the Maker-specific config within the Makers section of your Forge configuration.安装程序通常都有图标！别忘了在Forge配置的Makers部分的Maker特定配置中配置这些。

Here is an example of how that can be done:以下是如何做到这一点的示例：

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).要用作应用程序图标的ICO文件的URL（显示在“控制面板”>“程序和功能”中）。
        iconUrl: 'https://url/to/icon.ico',
        // The ICO file to use as the icon for the generated Setup.exe要用作生成的Setup.exe的图标的ICO文件
        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 windowDMG窗口中用于应用程序的图标的路径
      name: '@electron-forge/maker-dmg',
      config: {
        icon: '/path/to/icon.icns'
      }
    },
    {
      name: '@electron-forge/maker-wix',
      config: {
        icon: '/path/to/icon.ico'
      }
    }
  ]
  // ...
};

Once again, once you are done configuring your icons, don't forget to build your project with the Make command.再一次，完成图标配置后，不要忘记使用Make命令构建项目。