如何更改 ElectronJS 应用程序的默认图标？

Posted 2023-03-22

【中文标题】如何更改 ElectronJS 应用程序的默认图标？

【英文标题】：How to Change ElectronJS App default Icon?

【发布时间】：2020-02-09 14:10:40

【问题描述】：

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

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

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

【参考方案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

【参考方案2】：

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

const path = require('path')

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

【讨论】：

对于 Ionic 用户来说，这就是方式！

【参考方案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)
    ,
  );

【参考方案4】：

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

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