如何更改 ElectronJS App 默认图标？

Question

我是 electronjs 的新手。我想将 angular 应用程序转换为桌面。我可以成功实现，但问题是应用程序图标设置为默认电子而不是我提供的图标如下：

   win = new BrowserWindow({
    width: 600,
    height: 670,
    icon: `${__dirname}/dist/assets/imgs/logo.png`
  })

我在使用 Resource Hacker 构建应用程序后更改了图标，但我需要的是在构建时以正确的方式更改它。我错过了什么>

Answer 1

在main.js中指定图标

win = new BrowserWindow({
 width: 800, 
 height: 600,
 icon: __dirname + '/Icon/Icon.icns'
})

您还可以使用辅助 url 方法

const path = require('path')
const url = require('url')
const iconUrl = url.format({
 pathname: path.join(__dirname, 'Icon/Icon.icns'),
 protocol: 'file:',
 slashes: true
})

检查此以供参考：https://medium.com/fantageek/changing-electron-app-icon-acf26906c5ad

Answer 2

在主进程中，您必须指定图标路径。在 windows 中图标必须是 .ico 或者在 mac 中是 .icns

const path = require('path')

      mainWindow = new BrowserWindow({
        width: 900,
        height: 700,
        icon: path.join(__dirname, './img/icon.ico');
        }
      })

Answer 3

您可以根据您启动的平台更改图标。

const iconPath = process.platform !== 'darwin'
    ? 'src/assets/icons/favicon.ico'
    : 'src/assets/icons/favicon.icns';

  // Create the browser window.
  win = new BrowserWindow({
    icon: path.join(__dirname, iconPath),
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve) ? true : false,
      contextIsolation: false,  // false if you want to run e2e test with Spectron
      enableRemoteModule: true // true if you want to run e2e test  with Spectron or use remote module in renderer context (ie. Angular)
    },
  });

Answer 4

你可以做的是在这里插入一行代码：

WIN = new BrowserWindow = ({
    // ...
    icon: __dirname + '/relative/path/to/your/icon/file'
   // ...
});

Answer 5

我知道我回答这个问题迟到了，但我还是会继续。我通过艰难的方式了解了有关应用程序图标的这些内容。我认为通过比较开发和分发阶段可以更好地理解这个话题。

发展阶段

这是 npm start 的运行应用程序的同义词。在这个阶段你永远无法替换 Electron 的默认图标 -- 无论你添加什么代码。

唯一可能的方法是将重叠图标放在默认图标之上。但是，它可能不是您正在寻找的解决方案，因为它不是图标替换而只是覆盖。这是关于 Icon overlays.

的记录

OP的上述代码实际上是所谓的图标叠加的一个例子。

win = new BrowserWindow({
    width: 600,
    height: 670,
    icon: `${__dirname}/dist/assets/imgs/logo.png`
})

此外，图标叠加层也可用于替换 notification 图标。

分发阶段

这等同于使用以下任一分发框架：

electron-forge
electron-builder
electron-packager

为您的应用程序创建可执行文件 (.app/.exe)。正是在这个阶段，您实际上可以替换 Electron 的默认图标。

以electron-packager为例，您可以指定打包时要使用的图标，如下所示：

cd /path/to/app

# Mac (.icns)
npx electron-packager ./ --platform=darwin --icon=/path/to/your-custom-icon.icns

# Windows (.ico)
npx electron-packager ./ --platform=win32 --arch=x64 --icon=/path/to/your-custom-icon.ico

用electron-forge或electron-builder做是不同的方法。我还没试过。

重点是...只有在打包应用程序时才能真正替换 Electron 的默认图标。

如何更改 ElectronJS App 默认图标？

How to Change ElectronJS App default Icon?

electron

electron-builder

electron-packager

angular

发展阶段

分发阶段