Electronのアイコン設定(electron-builder v26)

windowsのelectron-builderでインストーラーファイルだけアイコンが反映されてアプリ本体はデフォルトのまま解決できない問題があった

以下のように設定したら解決出来た

electron-builder v26 では、
NSIS インストーラーのアイコンは "nsis" セクションに書きます。

package.json

{
  "name": "プロジェクト名",
  "version": "1.1.0",
  "description": "説明文",
  "main": "main.js",
  "scripts": {
    "start": "npm run build:renderer && electron . -- --prod",
    "electron": "electron . -- --dev",
    "dev": "concurrently \"npm run dev:renderer\" \"wait-on http://localhost:5173 && electron . --dev\"",
    "dev:renderer": "cd renderer && npm run dev",
    "build:renderer": "cd renderer && npm run build",
    "dist": "npm run build:renderer && electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@reduxjs/toolkit": "^2.11.0",
    "axios": "^1.12.2",
    "better-sqlite3": "^12.4.1",
    "dotenv": "^17.2.3",
    "electron-log": "^5.4.3",
    "electron-updater": "^6.6.2",
    "iconv-lite": "^0.7.0",
    "puppeteer": "^24.23.0",
    "react-redux": "^9.2.0",
    "sqlite3": "^5.1.7"
  },
  "devDependencies": {
    "@electron/packager": "^19.0.1",
    "concurrently": "^8.2.2",
    "electron": "^38.2.0",
    "electron-builder": "^26.0.12",
    "wait-on": "^7.2.0"
  },
  "build": {
    "appId": "アプリの一意のid",
    "productName": "アプリの名前",
    "directories": {
      "output": "dist",
      "buildResources": "assets"
    },
    "files": [
      "main.js",
      "main/**/*",
      "preload.js",
      "renderer/dist/**/*",
      "puppeteer/**/*",
      "src/**/*",
      "assets/**/*",
      "!**/node_modules/*/{test,__tests__,tests}/**"
    ],
    "icon": "assets/win/icon.ico",

    "win": {
      "target": "nsis",
      "icon": "assets/win/icon_win.ico"
    },
  
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
  
      "installerIcon": "assets/win/icon_win.ico",
      "uninstallerIcon": "assets/win/icon_win.ico",
      "installerHeaderIcon": "assets/win/icon_win.ico"
    },
    "extraResources": [
      {
        "from": "main/data",
        "to": "data/"
      }
    ]
  }
}

ポイント

特に以下の記述が重要

  "build": {
    "appId": "com.mycompany.googleviewclient",
    "productName": "GoogleFormViewClient",
    "directories": {
      "output": "dist",
      "buildResources": "assets"
    },
    "files": [
      "main.js",
      "main/**/*",
      "preload.js",
      "renderer/dist/**/*",
      "puppeteer/**/*",
      "src/**/*",
      "assets/**/*",
      "!**/node_modules/*/{test,__tests__,tests}/**"
    ],
    "icon": "assets/win/icon.ico",

    "win": {
      "target": "nsis",
      "icon": "assets/win/icon_win.ico"
    },
  
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
  
      "installerIcon": "assets/win/icon_win.ico",
      "uninstallerIcon": "assets/win/icon_win.ico",
      "installerHeaderIcon": "assets/win/icon_win.ico"
    },
    "extraResources": [
      {
        "from": "main/data",
        "to": "data/"
      }
    ]
  }

ビルド実行コマンド

node_modules/.bin/electron-builder --win --x64

公式ドキュメント
https://www.electron.build/configuration.html?utm_source=chatgpt.com