如何在电子应用程序中添加图标答案

【问题标题】：How to add an icon to electron application如何在电子应用程序中添加图标
【发布时间】：2017-07-29 18:31:08
【问题描述】：

我有用于 win .exe 和安装程序的电子构建文件，但图标不是我的。在我的 main.js 文件中，我有附加图标的代码，但我只能让它在 createWindow 函数中工作。在函数之外，我收到一条错误消息。 .exe 将运行，我得到我的图标，但这样做会出错；安装程序根本不起作用。我尝试了几个教程，但没有一个能解决这个问题。

main.js

const {app, BrowserWindow, Tray} = require('electron')
const path = require('path')
const url = require('url')

let win

function createWindow () {
  const appIcon = new Tray('icon/app.png')
  win = new BrowserWindow({ width: 1920, height: 1080, icon: 'icon/app.ico' })
  console.log(appIcon, win)
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'app/app.html'),
    protocol: 'file:',
    slashes: true
  }))
  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "MyApp",
  "private": true,
  "main": "main.js",
  "build": {
    "appID": "myapp",
    "productName": "MyApp",
    "icon": "icon/app.ico"
  },
  "scripts": {
    "start": "electron ." ,
    "package": "",
  },
  "author": "Me",
  "license": "ISC",
  "devDependencies": {
    "electron": "^1.6.1"
  }
}

我不知道从这里做什么。

【问题讨论】：

您要替换为默认应用程序图标还是其他特定的东西？
我希望我的图标替换所有位置的默认图标。
知道为什么电子应用程序在 Windows 选项卡模式下系统启动时没有自动打开窗口，但在桌面模式下工作完美？

标签： electron electron-builder electron-packager

【解决方案1】：

简单的解决方案

const nativeImage = require('electron').nativeImage;
    var image = nativeImage.createFromPath(__dirname + '/public/img/logo.png'); 
 // where public folder on the root dir

    image.setTemplateImage(true);


 // Create the browser window.
    win = new BrowserWindow({
        width: 1179,
        height: 754,
        backgroundColor: '#ffffff',
        transparent: false,
        icon: image
    })

【讨论】：

这对我有用。不需要使用image.setTemplateImage(true);。
在几个地方它说使用路径字符串就足够了。但直到我使用 nativeImage 让它在 Ubuntu 上运行。

【解决方案2】：

在 main.js 中

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

如果您使用的是 electron-builder，则在安装程序上

  "devDependencies": {
    "electron": "^1.4.15",
    "electron-builder": "^12.3.1"
  },

在根目录下创建一个文件夹，并在该文件夹内命名为 build 添加您的 icon.ico

有时您需要重新启动 electron 或构建应用程序 2 次p>

【讨论】：

【解决方案3】：

以下对我有用。要在任务栏中显示应用程序图标，您可以在 main.js 中动态更新图标（如果使用 typescript，则使用 main.ts）

win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));

值得一提的是__dirname与package.json指向同一个目录

【讨论】：