Electron 中如何设置 BrowserWindow 的图标？

推荐答案

在 Electron 中，可以通过 BrowserWindow 的 icon 选项来设置窗口的图标。以下是一个示例代码：

// www.javascriptcn.com code example
const { BrowserWindow } = require('electron');

const win = new BrowserWindow({
  width: 800,
  height: 600,
  icon: 'path/to/icon.png' // 设置窗口图标
});

win.loadURL('https://example.com');

本题详细解读

1. icon 选项的作用

icon 选项用于设置 BrowserWindow 窗口的图标。这个图标会显示在窗口的标题栏、任务栏以及操作系统的窗口管理器中。

2. 图标文件的路径

icon 选项接受一个字符串类型的路径，指向图标文件。这个路径可以是绝对路径，也可以是相对于当前工作目录的相对路径。常见的图标格式包括 .ico（Windows）、.icns（macOS）和 .png（跨平台）。

3. 跨平台兼容性

• Windows: 推荐使用 .ico 格式的图标文件。
• macOS: 推荐使用 .icns 格式的图标文件。
• Linux: 可以使用 .png 格式的图标文件。

4. 动态设置图标

除了在创建 BrowserWindow 时设置图标，还可以在运行时动态更改窗口图标：

// www.javascriptcn.com code example
const { BrowserWindow, nativeImage } = require('electron');

const win = new BrowserWindow({
  width: 800,
  height: 600
});

// 动态设置图标
const icon = nativeImage.createFromPath('path/to/another_icon.png');
win.setIcon(icon);

win.loadURL('https://example.com');

5. 注意事项

• 如果未指定 icon 选项，Electron 会使用默认的应用程序图标。
• 在某些操作系统上，窗口图标可能不会显示在任务栏或窗口管理器中，具体行为取决于操作系统的窗口管理器。