Electron 图标修改

最新推荐文章于 2025-06-13 15:34:32 发布

yqcoder

最新推荐文章于 2025-06-13 15:34:32 发布

阅读量1.5k

点赞数 5

CC 4.0 BY-SA版权

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/weixin_64684095/article/details/145106429

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"

    }

  }

}