自訂應用程式圖示

本指南的目的是逐步介紹產生和設定應用程式圖示，以及設定安裝程式和設定圖示的流程。

產生圖示

您可以使用網路上找到的各種轉換工具來產生圖示。建議從 1024x1024 像素的圖片開始，然後再將其轉換為各種尺寸。

支援較高的像素密度

在支援高 DPI 的平台上（例如 Apple Retina 顯示器），您可以在圖片的基本檔名後附加 @2x，將其標記為高解析度圖片。例如，如果 icon.png 是標準解析度的正常圖片，則 [e-mail] 將被視為具有雙倍 DPI 強度的高解析度圖片。

如果您想同時支援具有不同 DPI 密度的不同顯示器，您可以將不同尺寸的圖片放在同一個資料夾中，並使用沒有 DPI 後綴的檔名。例如

images/
├── icon.png
├── [e-mail]
└── [e-mail]

也支援以下 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