图标

安装程序图标

根据你使用的不同开发脚手架不同，图标文件放置位置也是不同的。下面我们使用 electron-vite 脚手架进行安装图标操作

build 目录内定义个 512x512 的 png 图片
删除 build目录中的 icon.icns 与 icon.ico 图片

使用 Photoshop等图像处理软件创建的512x512尺寸的png 图标，并命名为 icon.png，并放在项目根目录的 build 目录中

现在根据你的操作系统运行编译命令，具体在package.json文件中查看，然后就可以在 dist 目录中看到软件图标已经有效了

powershell

pnpm run build:mac

按上面的快速操作已经可以设置安装图标了，所以下面的操作可以不用做，除非你想了解安装图标的细节知识

mac

苹果系统的软件图标可以使用 png 或 icns，将生成的图标放在 build 目录即可

苹果系统安装程序图标可以使用 png格式，你使用 PS 软件制作就可以

要求文件名是 icon.png
图片尺寸是512x512

苹果系统安装程序也可以使用 icns 图标，可以使用多种方式创建 icns，比如 electron-icns 包生成，或使用 anyconv、 alltoall 等网站将 png 转为 icns 格式，也可以使用 sips 命令生成 icns 图标

electron-icns

使用 electron-icns 可以简单快速的创建 icns 图片

powershell

pnpm add -g electron-icns
# png图片的路径
electron-icns build/icon.png

使用 sips 生成

下面来讲解使用 sips 制作icns 图片，以下命令需要在苹果系统执行。创建目录 icons.iconset 目录必须以.iconset 结尾

powershell

mkdir icon.iconset

生成 png 图标，将build 目录中的 png图标生成到 icons.iconset 目录

powershell

sips -z 512 512 build/icon.png --out icons.iconset/icon_512x512.png
sips -z 1024 1024 build/icon.png --out icons.iconset/icon_512x512@2x.png

执行以下命令在项目根目录下生成 icns 文件，然后将 icns 文件复制到 build 目录就可以了

plain

iconutil -c icns icons.iconset -o icon.icns

window

window 系统支持 png 与 icon 图片文件，需要将图标复制到 build 目录，下面介绍几种图片格式的创建要求。

png
使用图像处理软件创建512x512 尺寸的 png 图片文件
icon
如果你想使用 icon 格式可以能过在线网站将png 转为 icon，图片尺寸不能小于 256x256

状态栏图标

window

首先介绍 window 隐藏任务栏图标的方式

javascript

const mainWindow = new BrowserWindow({
  width: 300,
  height: 300,
  //隐藏任务栏图标
  skipTaskbar: true,
  ...
})

mac

下面是定义苹果系统隐藏 dock 栏图标

javascript

app.whenReady().then(() => {
  ...
  //隐藏苹果dock图标
  if (process.platform == 'darwin') app.dock.hide()
    ...
})

托盘图标

你可以使用 PS 等软件创建图标文件。如果你使用的是 electron-vite 脚手架，需要将图标文件放在 resources 目录中

Mac

苹果系统图标指的是顶部菜单栏处的图标，要求如下：

要求文件名以 Template 单词结尾如macTrayTemplate@2x.png
分辨率和尺寸可以是16x16 (72dpi) 或 32x32@2x (144dpi)
要求是白色图标

windows

window 图标指的是底部右侧的图标，要求如上：

可以使用彩色的 png 图标
尺寸和分辨率是 32x32（144dpi）文件

示例代码

下面是托盘图示的定义，并且 window 与 mac 使用不同的图标

javascript

import { Menu, Tray } from 'electron'
import path from 'path'
const createTray = () => {
  const tray = new Tray(
    path.resolve(
      __dirname,
      process.platform == 'darwin'? '../../resources/trayTemplate@2x.png': '../../resources/windowTray.png'
    )
  )
  const contextMenu = Menu.buildFromTemplate([{ label: '退出', role: 'quit' }])
  tray.setToolTip('标题')
  tray.setContextMenu(contextMenu)
}

export { createTray }

需要在 app 之后创建图标

javascript

app.whenReady().then(() => {
  ...
  createTray()
  createWindow()
    ...
})