做桌面应用的时候，图标这个东西看着简单，真弄起来全是坑。这篇文章把我折腾了一下午的经验整理一下，给后面的人省点时间。

ICO 到底是什么

ICO 是 Windows 的图标格式。跟 PNG 不同，一个 .ico 文件可以同时包含多个尺寸的图标。你传一个 256 的给系统，Windows 会在不同场景自动挑合适的尺寸用。所以桌面应用一般要求一个文件里 16 到 256 全部有。

桌面应用和网页图标的区别

这两件事经常被混在一起说，其实是两套做法。

桌面应用要的是"全尺寸 ICO"，也就是 16、32、48、64、128、256 这 6 个尺寸都在一个文件里。Web 则反过来，现在没人折腾 ICO 了，直接放几个 PNG 就行。

桌面应用的全尺寸 ICO

各个尺寸的用途：

源图建议至少 512x512，最好是 1024x1024，正方形，透明背景 PNG。

ImageMagick 最省心

# 安装
brew install imagemagick

# 生成全尺寸 ICO
magick icon.png -define icon:auto-resize=256,128,64,48,32,16 icon.ico

注意 ImageMagick 7 里 convert 命令已经废弃了，要用 magick。

Pillow 有坑，别用它

Pillow 的 save 方法在保存多尺寸 ICO 上有已知 bug，sizes 参数和 append_images 都可能只保存第一个尺寸。我用的时候 file 一验证，就 1 个 icon，白折腾。要省事就上 ImageMagick。

在线工具

• convertio.co
• icoconvert.com

传一张 PNG 上去，自动给你生成多尺寸 ICO。

怎么验证是不是全尺寸

file icon.ico
# 输出：icon.ico: MS Windows icon resource - 6 icons, 256x256, ...

看到 6 icons 就对了。有时候输出里会出现负数尺寸，比如 -128x-128，别慌，那只是表示这一层用的是 PNG 压缩存储，正常现象。

Wails 项目里怎么用

cp icon.ico your-app/build/app.ico

Wails 在 wails build 的时候会自动把图标打进二进制里。

Web 端 Favicon 的正确姿势

Web 的思路是反过来：按场景准备几个独立 PNG，在 HTML 里声明清楚。

常用尺寸：

HTML 里这样声明：

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Android Chrome 需要配合 site.webmanifest：

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

如果你懒得搞这么多，一个 32x32 的 PNG 其实也够了：

<link rel="icon" href="/favicon.png">

批量生成就用这一串：

magick icon.png -resize 16x16 favicon-16x16.png
magick icon.png -resize 32x32 favicon-32x32.png
magick icon.png -resize 180x180 apple-touch-icon.png
magick icon.png -resize 192x192 android-chrome-192x192.png
magick icon.png -resize 512x512 android-chrome-512x512.png

总结一下踩过的坑

1. Pillow 写多尺寸 ICO 有 bug，sizes 和 append_images 可能只保存第一个尺寸，file 一验证只有 1 icon。遇到这种问题直接换 ImageMagick。
2. IMv7 里 convert 已废弃，用 magick。
3. file 输出里的负数尺寸（如 -128x-128）是 PNG 压缩存储，不是错误。
4. Web 场景不需要 ICO，现代浏览器都支持 PNG favicon。ICO 主要是桌面应用的需求。

最核心的经验就一条：桌面用 ImageMagick 一条命令生成全尺寸 ICO，Web 端按尺寸准备 PNG 再用 HTML 声明。剩下的细节都在上面了。