Change Electron App Name and Icon in Task Manager (Development Mode)

I am working on an Electron application and want to ensure that the app name and icon are correctly displayed in all system references, including:
✅ Task Manager (Windows)
✅ Process Monitor
✅ Taskbar

Current Setup

I have the following configuration in package.json:

{
  "name": "webstack-deployer-for-docker",
  "productName": "WebStack Deployer for Docker",
  "appId": "com.webstack.deployer4docker.app",
  "version": "1.0.0",
  "main": "src/main.js",
  "icon": "src/assets/icons/icon.ico",
  "scripts": {
    "start": "electron src/main.js --trace-warnings",
    "build": "electron-builder"
  },
  "dependencies": {
    "electron-is-dev": "^3.0.1"
  },
  "devDependencies": {
    "electron": "^34.0.2",
    "electron-builder": "^24"
  },
  "build": {
    "appId": "com.webstack.deployer4docker.app",
    "productName": "WebStack Deployer for Docker",
    "win": {
      "target": "nsis",
      "icon": "src/assets/icons/icon.ico"
    },
    "mac": {
      "appId": "com.webstack.deployer",
      "target": "dmg",
      "icon": "src/assets/icons/icon.icns"
    }
  }
}

Code Implementation

In my main process (main.js), I attempt to set the application name and icon:

app.name = 'WebStack-Deployer-for-Docker';
app.setAppUserModelId('com.webstack.deployer');

if (process.platform === 'win32') {
    app.setUserTasks([
        {
            program: process.execPath,
            arguments: '',
            iconPath: path.join(__dirname, 'assets/icons/icon.ico'),
            iconIndex: 0,
            title: 'WebStack Deployer for Docker',
            description: 'Launch WebStack Deployer for Docker'
        }
    ]);
}

this.mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    frame: false,
    icon: path.join(__dirname, '../assets/icons', process.platform === 'win32' ? 'icon.ico' : 'icon.icns'),
    webPreferences: {
        nodeIntegration: false,
        contextIsolation: true,
        preload: path.join(__dirname, '../preload.js')
    }
});

Problem

• The name and icon correctly appear in the taskbar, but they do not update in Task Manager or Process Monitor during development mode (yarn start).
• The installed production build works fine, but I need the correct name and icon to appear during development as well.

When I run the application using yarn start, I get this result in development mode:

However, the icon and name do not change properly in Task Manager or Process Monitor:

Question

How can I ensure that the application name and icon update properly in Task Manager and Process Monitor while running in development mode (yarn start)?

The Window Task Manager determines the displayed process names and icons based on certain resources embedded in the corresponding executables. The displayed names are based on the FileDescription from the version information resource and the displayed icons use the icon resource. (This is a bit of a simplified explanation that doesn't cover all of the details of how the Task Manager determines what it displays in the process list. For example, for processes that have visible windows, the Task Manager may prefer the window title and icon over the embedded resources.)

When you package your app with electron-builder, it downloads a precompiled Electron executable (from GitHub) and then uses the tool rcedit to modify the resources embedded in the electron.exe to apply your custom branding (product name, icon, company name, file description, etc.) Now, when you run this branded executable, the icon and name should show up correctly in the Task Manager provided that electron-builder was configured correctly.

In development mode, you are running a different Electron executable which does not have that custom branding applied. In your package.json, you are executing the following start script:

electron src/main.js --trace-warnings

The electron part of the command resolves to one of the scripts in the directory node_modules/.bin. On Windows, likely node_modules/.bin/electron.cmd or node_modules/.bin/electron.ps1. These shell scripts in turn execute node_modules/electron/cli.js which starts node_modules/electron/dist/electron.exe.

The electron.exe in that dist directory just has the default Electron branding applied. (It was downloaded from GitHub when you installed the npm package electron, via that package's post-install script.) That's why the Task Manager displays the default Electron icon and name when running your app in development mode.

If you want to change your app icon and name in development mode, you could for example use the rcedit tool as well to modify the downloaded electron.exe:

.\rcedit.exe .\node_modules\electron\dist\electron.exe --set-icon .\build\my-icon.ico
.\rcedit.exe .\node_modules\electron\dist\electron.exe --set-version-string FileDescription "My App"

This seems to do the trick for me. The icon and name "My App" show up in the Task Manager for me. The Process Monitor seems to display the correct icon in the process list as well.