从 favicon 创建 Electron 应用图标

如果打包后的 Electron app 仍然显示默认的 Electron logo，说明它的原生 bundle icon 还没有配置。用 favicon 文件制作 Electron app icon 需要准备对应平台的资源文件；通过 rel='icon' 声明的页面资源与已安装 app 的 icon 是两回事（[HTML Standard](https://html.spec.whatwg.org/multipage/links.html#rel-icon)）。

前置条件

准备好 Electron 项目和 electron-builder，并确保 ImageMagick 可通过 PATH 调用。
一个正方形 SVG，或可用的最大尺寸 PNG favicon。不要把 16 像素的位图直接放大，还指望成品保持清晰。
执行 macOS 相关命令时，请使用包含 sips 和 iconutil 的 macOS shell。

如果缺少源文件，请参阅如何从任意网站下载 Favicon。Mzu favicondl 可以将其转换为 PNG 和 ICO。

从 favicon 文件制作 Electron app icon

创建 1024 像素主图。 将图形居中放在透明的正方形画布上：
```
magick -background none favicon.svg -resize '1024x1024>' -gravity center -extent 1024x1024 icon.png
```
将 favicon.svg 替换成实际文件。优先使用矢量图；如果源图尺寸很小，导出前应重新绘制。
构建多分辨率 ICO。 仅给 PNG 改名并不能生成 ICO：
```
magick -background none favicon.svg -define icon:auto-resize=256,128,64,48,32,24,16 icon.ico
```
替换为实际输入文件，并让 icon.png 与 icon.ico 并排放在一起。

在 macOS 上根据主图创建 ICNS：

mkdir -p icon.iconset
sips -z 16 16 icon.png --out icon.iconset/icon_16x16.png
sips -z 32 32 icon.png --out icon.iconset/[email protected]
sips -z 32 32 icon.png --out icon.iconset/icon_32x32.png
sips -z 64 64 icon.png --out icon.iconset/[email protected]
sips -z 128 128 icon.png --out icon.iconset/icon_128x128.png
sips -z 256 256 icon.png --out icon.iconset/[email protected]
sips -z 256 256 icon.png --out icon.iconset/icon_256x256.png
sips -z 512 512 icon.png --out icon.iconset/[email protected]
sips -z 512 512 icon.png --out icon.iconset/icon_512x512.png
cp icon.png icon.iconset/[email protected]
iconutil -c icns icon.iconset -o icon.icns

这样可以生成原生 ICNS 容器。

在 electron-builder.yml 中为 electron-builder 指定各项资源：
```
win:
  icon: build/icon.ico
mac:
  icon: build/icon.icns
linux:
  icon: build/icon.png
```
把这三个文件全部复制到 build/ 中。运行 npx electron-builder，然后检查对应平台的安装包。

常见误区

只使用浏览器 favicon。 标签页的 favicon 不能替代应用包图标。关于两者在设计上的区别，请参阅Favicon 与 App Icon 的区别。
把 PNG 重命名为 ICO。 仅更改扩展名不会生成多尺寸容器；请使用上面的转换命令。
裁剪时丢失图形标识。 让重要形状远离边缘，并测试最小尺寸下的渲染效果。原生图标所需的图形应比完整 logo 更简洁。
使用不匹配的路径。 YAML 路径相对于项目配置，而 Linux 路径区分大小写。构建前请确认每个文件都存在。

结论

将 favicon 作为源图形，导出各平台原生的容器，再让打包工具把正确的图标放入每个应用包。Mzu favicondl 可处理 favicon 到 PNG 的转换以及 ICO 准备工作，让你专注于简洁的图形标识和可复现的 Electron 构建。

前置条件

从 favicon 文件制作 Electron app icon

常见误区

结论

从 favicon 制作 Electron 原生图标