🖥️ 告别 Electron 托盘图标模糊：一套精准的 PNG 生成方案

梦鱼
11 阅读3分钟

在开发 Electron 应用时，托盘图标（Tray Icon）的清晰度一直是个让人头疼的问题。尤其是在 Windows 系统上，不同 DPI 缩放比例下，图标很容易变得模糊或有锯齿。

废话不多说，直接上干货！本文将分享一套我一直在用的实战建议和一个自动化生成脚本。

🎯 托盘图标的实战建议

  1. 原始素材要高清：

    • 最好使用 SVG 矢量图。如果不行，至少准备一张 512x512 的 PNG。高清的源文件是保证缩小后依然清晰的基础。

  2. 设计遵循“粗线条、少细节” ：

    • 图标最终会被缩小到 16px 显示。如果原始图标细节太多（比如很细的线条、复杂的渐变色），缩小后这些细节会挤在一起，看起来就是一团糊。

  3. Electron 选 PNG，放弃 ICO：

    • 虽然 Windows 原生支持 ICO，但在 Electron 中，使用多尺寸的 PNG 配合 resize 和 compress 选项，效果更稳定，兼容性也更好。建议优先使用带透明背景的 PNG。

⚙️ 一键生成脚本 (PowerShell)

下面这个 PowerShell 脚本基于 ImageMagick，可以一键将你的高清素材生成符合 Electron 托盘规范的多尺寸图标。

📦 准备工作

  1. 安装 ImageMagick。安装时务必勾选“Install legacy utilities (e.g. convert)”，或者确保 magick 命令可用。
  2. 准备好你的原始素材（假设命名为 原始素材.png）。

🚀 如何使用

  1. 打开 PowerShell。
  2. 复制粘贴下面的脚本。
  3. 修改脚本开头的 $sourcePath 和 $outputDir 变量为你的实际路径。
  4. 运行即可。
<#
.SYNOPSIS
  使用 ImageMagick 生成 Electron 托盘图标的多尺寸 PNG 文件。
.DESCRIPTION
  脚本会从原始素材生成 16x16, 20x20, 24x24 的图标，
  并复制一份 20x20 作为默认的托盘图标。
#>

# --- 用户配置区：请修改这两行 ---
$sourcePath = "D:\你的项目路径\原始素材.png"  # 你的高清源文件路径
$outputDir  = "D:\你的项目路径\src\renderer\public\trayIcon" # 输出文件夹路径
# --- 配置结束 ---

# 1. 检查 ImageMagick 是否可用
if (!(Get-Command "magick" -ErrorAction SilentlyContinue)) {
    Write-Host "❌ 错误：未找到 ImageMagick (magick 命令)。请安装并确保它在 PATH 环境变量中。" -ForegroundColor Red
    exit 1
}

# 2. 检查源文件是否存在
if (!(Test-Path $sourcePath)) {
    Write-Host "❌ 错误：源文件不存在，请检查路径: $sourcePath" -ForegroundColor Red
    exit 1
}

# 3. 创建输出目录（如果不存在）
if (!(Test-Path $outputDir)) {
    New-Item -ItemType Directory -Path $outputDir -Force | Out-Null
    Write-Host "📁 创建输出目录: $outputDir" -ForegroundColor Green
}

# 4. 显示原始图片信息（用于调试）
Write-Host "🔍 原始图片信息：" -ForegroundColor Cyan
magick identify "$sourcePath"

# 5. 生成不同尺寸的图标
Write-Host "⚙️ 开始生成图标..." -ForegroundColor Cyan

# 生成 16x16 (主要用于任务栏和系统托盘的高DPI缩放)
magick "$sourcePath" -background none -resize 16x16 -gravity center -extent 16x16 "$outputDir\trayIcon@16.png"
Write-Host "  ✅ 生成: trayIcon@16.png"

# 生成 20x20 (Electron 默认推荐的托盘图标大小)
magick "$sourcePath" -background none -resize 20x20 -gravity center -extent 20x20 "$outputDir\trayIcon@20.png"
Write-Host "  ✅ 生成: trayIcon@20.png"

# 生成 24x24 (用于更大的缩放比例)
magick "$sourcePath" -background none -resize 24x24 -gravity center -extent 24x24 "$outputDir\trayIcon@24.png"
Write-Host "  ✅ 生成: trayIcon@24.png"

# 生成默认托盘图标 (通常也是 20x20，方便引用)
magick "$sourcePath" -background none -resize 20x20 -gravity center -extent 20x20 "$outputDir\trayIcon.png"
Write-Host "  ✅ 生成: trayIcon.png (默认)"

# 生成一个透明占位图 (可选，有时用于布局占位)
magick -size 20x20 xc:none "$outputDir\transparent.png"
Write-Host "  ✅ 生成: transparent.png"

# 6. 显示生成的文件列表及大小
Write-Host "📄 生成的文件列表：" -ForegroundColor Cyan
Get-ChildItem "$outputDir" | Select-Object Name, @{Name="Size(KB)"; Expression={[math]::Round($_.Length/1KB, 2)}}
Write-Host "🎉 图标生成完成！" -ForegroundColor Green

脚本要点解读

  • -background none: 确保生成的 PNG 保持透明背景。
  • -resize + -extent: 先按比例缩放，然后将画布扩展/裁剪到指定尺寸，确保图标居中且不留白边。
  • 为什么生成 @16, @20, @24？ ：在 Electron 中创建 Tray 时，可以传入一个包含多个尺寸的 NativeImage，Electron 会根据系统的最佳大小自动选择合适的图标，从而完美适配不同分辨率的屏幕。

希望这套方案能帮你彻底解决托盘图标模糊的问题！如果有更好的建议，欢迎在评论区讨论。

avatar
文章
阅读
粉丝