首页 > 建站教程 > nodejs,electron >  修改Electron的图标正文

修改Electron的图标

1. 窗口图标修改

在 Electron 的主进程代码中,通常是`main.js`文件,在创建`BrowserWindow`实例时,使用`icon`选项来设置窗口图标。

const { BrowserWindow } = require("electron");
const path = require("path");
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
    // 指向你的图标文件,可根据实际情况修改路径
    icon: path.join(__dirname, "path/to/your/icon.png"),
  });
  win.loadFile("index.html");
}
app.whenReady().then(createWindow);


2. 桌面应用图标修改

2.1 准备图标文件

根据目标操作系统,准备相应格式的图标文件。Windows 平台一般使用`.ico`格式,macOS 平台使用`.icns`格式。图标文件可以通过专业的图标设计工具创建,也可利用在线图标生成器生成。


2.2 放置图标文件

将准备好的图标文件放置在 Electron 项目的适当位置,通常建议放在项目的根目录下。对于 Windows,可将图标文件命名为`icon.ico`;对于 macOS,可命名为`icon.icns`。


2.2 配置图标路径

在`package.json`文件中,找到`build`字段,添加`icon`字段并设置其值为图标文件的路径。

{
  "name": "your-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "build": {
    "appId": "com.example.yourapp",
    "win": {
      // 指向Windows下的.ico图标文件
      "icon": "build/icon.ico"
    },
    "mac": {
      // 指向macOS下的.icns图标文件
      "icon": "build/icon.icns"
    }
  }
}