图标使用的地方非常多，打包生成exe的图标，运行时的图标，系统托盘的图标等等

这里我们先介绍几种格式：

png,jpg,icns,ico

png：是一种采用无损压缩算法的位图格式，兼容性好。

jpg：JPG一般指JPEG格式。JPEG（Joint Photographic Experts Group）是JPEG标准的产物，该标准由国际标准化组织（ISO）制订，是面向连续色调静止图像的一种压缩标准。JPEG格式是最常用的图像文件格式，后缀名为.jpg或.jpeg。

icns：一般是用来给application做resource的icon文件,也是macintosh系统里独特支持的格式。

ico:ICO是Windows的图标文件格式，图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

所以换句话说，icns是mac用的（有些时候linux也可以使用），ico是windows用的

怎么制作这些图标？

1.首先，准备问美工要一个1024x1024的png图标

2.有两个库可以帮助我们

electron-icon-maker

electron-icon-builder
具体使用说明请查看readme

吐槽：这两个玩意都依赖PhantomJS这个无头浏览器，让我很是烦躁，这玩意一方面是不好用，另一方面下载贼麻烦，搞得我在Linux环境下使用Jenkins做持续集成，下载总下不下来，气死我了。

各种情况的使用

1.打包以后的图标

我这里使用的是vue+electron-builder打包。

windows使用ico,mac使用icns,linux使用png或者icns

打包图标参考资料

2.默认标题的图标

这里的图标，设置来自创建window时的icon属性设置

new BrowserWindow({
    ******
    icon: path.join(__static, 'logo.png');
  });

但是这里在不同版本的electron上可能存在bug，因此建议使用nativeimage引入。建议此处引入区分不同系统，windows使用ico图标，其他系统使用png图标

function getTrayIcon() {
  if (process.platform !== 'darwin') {
    // windows
    return path.join(__static, 'icon.ico');
  }
  return path.join(__static, 'icon.png');
}
******
new BrowserWindow({
    ******
    icon: nativeImage.createFromPath(getTrayIcon()),
  });

托盘图标

同理，建议区分系统，另外mac上建议使用生成的16x16的图标（个人建议，没有资料引用）

1	tray = new Tray(nativeImage.createFromPath(getTrayIcon()));

— 2023.3.5更新 —

最后附上：一行命令得到图标

我这里使用pnpm，使用npm的自行替换pnpm dlx为npx

1
2
3

# pnpm dlx electron-icon-builder --input=已有图片路径 --output=输出路径 --flatten
# 例如
pnpm dlx electron-icon-builder --input=./public/images/logo.jpeg --output=build --flatten