Configuration and generation of Electron application icons

Technology selection:

1、"electron": "21.3.3",

2、"electron-vite": "1.0.17"

3、"vue": "3.2.45"

4、"element-plus": "2.2.32"

background:

By default, there are four types of icons used by the applications we develop using electron:

1. Software installation file icon:

2. The icon generated on the desktop after the software is installed:

3. The icon displayed on the taskbar after the software is opened:

4. The icon displayed in the upper left corner after the software is opened:

So how to set these four icons in electron?

In fact, the above four icons can be divided into two categories, 1 and 2 are divided into one category, called installation package icons, 3 and 4 are divided into one category, the icons displayed when the software is running, called window icons

Modification of window icon:

1. Modified file: src\main\index.js

2. For the content of the modified file, refer to the eighth line of the following code, and set the icon property in BrowserWindow:

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1400,
    height: 800,
    show: false,
    autoHideMenuBar: true,
    icon: join(__dirname,'../../resources/image/3.png'),
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      nodeIntegration: true
    }
  })

Modification of the installation package icon

1. The modification of the installation package icon is much more difficult than the modification of the window icon

2. Install electron-icon-builder

npm i electron-icon-builder

3. Add the following code line 11 in the scripts of package.json:

  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "npm run build && electron-builder --mac --config",
    "build:linux": "npm run build && electron-builder --linux --config",
    "electron:generate-icons":"electron-icon-builder --input=./resources/icon.png --output=build --flatten"
  }

4. Copy the image icon.png we prepared to the resources directory

5. Execute the generate icon command:

npm run electron:generate-icons

6. After the command is executed, many icons are generated under the project's build\icons directory:

7. electron-builder.yml file configuration:

nsis:
  artifactName: ${name}-${version}-setup.${ext}
  shortcutName: ${productName}
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
  installerIcon: 'build/icon.ico'
  uninstallerIcon: 'build/icon.ico'

installerIcon: Configure the installation package icon

uninstallerIcon: uninstall command icon

(Copy the ico in step 6 to the build directory)

8. Compile and package:

npm run build:win

9. The corresponding installation package is generated in the dist directory of the project: