Favicon 与 Electron/Tauri：为桌面 Web 应用打造品牌形象

你已经构建了一个 Web 应用，现在想把它打包成桌面应用。你启动 Electron 或 Tauri，运行构建命令，然后……那个通用的默认图标就这样盯着你看。这可不是你想要的专业形象。

问题在于：桌面应用图标的工作方式与 Web favicon 完全不同。你 public 文件夹里那个 32x32 的小 PNG？它根本不够用。桌面应用需要多种格式、特定尺寸以及大多数 Web 开发者从未考虑过的平台特定文件。

为什么你的 Favicon 不够用

当你的 Web 应用在浏览器中运行时，favicon 显示在标签页中。很简单。但当你用 Electron 或 Tauri 包装同一个应用时，突然你需要图标用于：

应用窗口标题栏
Dock（macOS）或任务栏（Windows）
安装程序和设置向导
"添加/删除程序"列表
文件关联
Spotlight 搜索和 Finder 预览

每个这些场景都期望不同的尺寸，有时甚至是完全不同的格式。这就是为什么单个 favicon 文件会让你的桌面应用看起来不完整。

你真正需要的三种格式

ICO 用于 Windows

Windows 使用 ICO 格式，它实际上是一个容器，可以在一个文件中包含多种尺寸。你的 ico 文件应该包含 16、24、32、48、64 和 256 像素的图层。256px 图层特别重要，因为 Windows 会在高 DPI 显示和大图标视图中使用它。

一个常见错误是生成只有 32px 图层的 ico。这对任务栏有效，但在开始菜单和文件资源管理器中你的应用会显得模糊。

ICNS 用于 macOS

Apple 的 ICNS 格式在概念上与 ICO 类似——它将多种尺寸捆绑在一起。但尺寸要求更严格。你需要 16x16、32x32、128x128、256x256 和 512x512，并且为 Retina 显示提供 1x 和 2x 版本。

macOS 上的 iconutil 命令可以将特殊结构的 PNG 文件夹转换为 icns 文件，但说实话，自动化工具更容易。

PNG 用于 Linux

Linux 桌面环境更灵活。大多数会接受标准尺寸（128、256、512）的 PNG 文件集。一些 electron-builder 和 Tauri 配置只需要指向一个高分辨率 PNG，让系统处理缩放。

配置 Electron

如果你使用 electron-builder（大多数 Electron 项目都用），图标配置放在 package.json 或 electron-builder.yml 中：

{
  "build": {
    "appId": "com.yourapp.id",
    "icon": "build/icon",
    "mac": {
      "icon": "build/icon.icns"
    },
    "win": {
      "icon": "build/icon.ico"
    },
    "linux": {
      "icon": "build"
    }
  }
}

electron-builder 在 buildResources 目录（默认为 build）中查找图标文件。将你的 icon.icns、icon.ico 和一组 PNG 文件放在那里就可以了。

对于 Electron Forge，过程类似但使用不同的配置格式。forge.config.js 文件处理每个平台的图标路径。

配置 Tauri

Tauri 采用略有不同的方法。tauri icon 命令从单个源图像生成所有需要的格式：

npm run tauri icon ./app-icon.png

这会创建整个 icons 文件夹，其中包含所有平台正确格式的文件。默认输出到 src-tauri/icons/。

你的 tauri.conf.json 在 bundle 部分引用这些图标：

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Tauri 2.0 简化了这个配置——bundle 键现在在顶层而不是嵌套在 tauri 下。

你的 Web Favicon 仍然重要

这里有一个让人困惑的地方：即使设置了桌面图标，你的 Web favicon 仍然会在应用内部使用。当你的 Electron 或 Tauri 应用加载 Web 内容时，webview 仍然像浏览器一样请求 favicon.ico。

这意味着你两个都需要：

桌面应用图标（icns、ico、png）用于操作系统级 UI
Web favicon 用于内部 webview 内容

如果你跳过 Web favicon，一些内部浏览器 chrome 或 devtools 可能会显示损坏的图标。这是个小问题，但很容易修复。

从单个源生成图标

没有人想手动创建 15 个以上的图标变体。以下是真正有效的工具：

用于 Electron：

electron-icon-builder - 给它一个 1024x1024 PNG，它会输出你需要的一切
electron-icon-maker - 类似功能的 npm 包

用于 Tauri：

内置的 tauri icon 命令 - 如果你已经在使用 Tauri CLI，这是最简单的选择

通用用途：

Real Favicon Generator - 基于 Web，同时处理 Web favicon 和桌面图标
IconVectors - 将单个 SVG 转换为 ICO、ICNS 和 PNG 集

关键是从至少 1024x1024 像素的源图像开始。SVG 更好，因为它可以完美缩放。

设计注意事项

桌面图标与 Web favicon 存在于不同的环境中。需要记住几点：

简洁利于缩放。 你的 512px 图标可能看起来很棒，但检查一下它在 16px 时的渲染效果。复杂的细节会变成模糊的色块。

在实际背景上测试。 macOS dock 图标位于半透明背景上。Windows 任务栏图标可能在浅色或深色主题上。确保你的图标在两种场景下都有足够的对比度。

尊重平台惯例。 macOS 图标通常有微妙的阴影和圆角。Windows 图标往往更扁平。你不必完全遵循这些，但了解它们有助于让你的应用感觉更原生。

考虑可遮罩变体。 一些环境（特别是 Android，如果你也在做移动端）会将你的图标裁剪成圆形或圆角方形。设计时考虑安全区域。

常见问题和修复

重新构建后图标不更新？ Electron 和 Tauri 在开发期间都会积极缓存图标。尝试完全清除构建输出目录并重新构建。

Windows 上图标模糊？ 你的 ico 文件缺少 256px 图层。使用包含所有必需尺寸的工具重新生成。

macOS 显示通用图标？ icns 文件可能格式错误或位置不对。运行 iconutil -c icns YourIcon.iconset -o icon.icns 从头重新生成。

Linux 图标不显示在 dock 中？ 一些桌面环境需要通过 .desktop 文件注册图标。检查你的 electron-builder 或 Tauri 配置中的 Linux 特定设置。

整合在一起

跨平台桌面应用正确配置的图标设置看起来像这样：

build/
├── icon.icns          # macOS 应用图标
├── icon.ico           # Windows 应用图标
├── icon.png           # 512px 用于 Linux
├── 256x256.png        # 额外的 Linux 尺寸
└── 128x128.png

再加上你在 public 或 static 目录中用于 webview 内容的常规 Web favicon。

这些额外的努力是值得的。一个精致的图标向用户表明你的应用是完整和专业的——而不仅仅是一个包装在壳里的网页。这是人们首先看到的东西之一，第一印象很重要。

参考资料

Electron Forge 图标指南 - 创建和添加 Electron 应用图标的官方文档
electron-builder 图标 - electron-builder 图标设置的配置参考
Tauri 应用图标 - Tauri 2.0 图标生成和配置文档
Apple 图标图像格式 - ICNS 格式规范的维基百科参考
定义你的应用图标 - MDN - Mozilla 关于 PWA 应用图标要求的指南