如何为你的电子应用程序设置应用程序图标?

我正在尝试BrowserWindow({icon:'path/to/image.png'});但这并不奏效。

我是否需要打包应用才能看到效果?


当前回答

下面是我的解决方案:

new BrowserWindow({
  width: 800,
  height: 600,
  icon: __dirname + '/Bluetooth.ico',
})

其他回答

如果您正在将现有的web应用程序转换为Electron应用程序,您可以使用以下代码:

const path = require('path')

const mainWindow = new BrowserWindow({
  icon: path.join(__dirname, 'favicon.ico'),
})

在Linux中,您可以在项目目录中搜索icon.png,并使用您的自定义图标(具有相同的名称)更改两个文件(一个用于Debian,一个用于Redhat)。

**

重要的是: 过时的答案,看看其他更新的解决方案

**

你也可以在macOS上这么做。好的,不是通过代码,而是通过一些简单的步骤:

找到你想要使用的。icns文件,打开它并通过编辑菜单复制它 找到电子。App,通常在node_modules/electron/dist中 打开信息窗口 选择左上角的图标(灰色边框) 通过cmd+v粘贴图标 在开发过程中享受你的图标:-)

实际上,这是一个普遍的现象,并不局限于电子。你可以像这样更改许多macOS应用程序的图标。

在我的情况下,我不需要指定任何路径,如./,因为我使用构建目录,这是我的配置:

"build": {
  "directories":{
     "output": "build"
  },
  "mac": {
     "icon": "build/logo.icns"
  },
  "win": {
     "icon": "build/logo.png"
   }
}

我发现使用。/logo.png会让电子显示同样的错误:

默认电子图标被使用的原因=应用程序图标没有设置

下面是我的解决方案:

new BrowserWindow({
  width: 800,
  height: 600,
  icon: __dirname + '/Bluetooth.ico',
})