图标制作指南 🎨

lishihuan大约 4 分钟

图标制作指南 🎨

📍 图标文件位置

需要放置的位置：

sys-ui\electron\icon.ico

📋 图标要求

必须满足的条件

项目要求
文件名icon.ico
格式ICO 格式（不是 PNG 改后缀）
包含尺寸16, 24, 32, 48, 64, 128, 256 像素
文件大小> 50KB（包含多尺寸）
背景透明（推荐）
质量高清，边缘清晰

🎯 推荐方法：在线工具（最简单）

步骤1：准备源图片

要求：

  • ✅ 格式：PNG
  • ✅ 尺寸：512x512 或更大（推荐 1024x1024）
  • ✅ 背景：透明
  • ✅ 内容：居中，不要太靠边

示例：

┌─────────────────┐
│                 │
│   ┌─────────┐   │  ← 图标内容居中
│   │  LOGO   │   │     留有边距
│   └─────────┘   │
│                 │
└─────────────────┘

步骤2：使用在线工具转换

注： 一个 .ico 文件可以同时包含 16×16、32×32、48×48、64×64、128×128、256×256 等多种尺寸的图像

在转换网站中

推荐网站：

操作步骤（以 aconvert.comopen in new window 为例）：

  1. 打开网站

    https://www.aconvert.com/cn/icon/png-to-ico/

  2. 上传图片

    • 目前图片格式都支持

  3. 选择尺寸

    • ✅ 勾选 16x16
    • ✅ 勾选 24x24
    • ✅ 勾选 32x32
    • ✅ 勾选 48x48
    • ✅ 勾选 64x64
    • ✅ 勾选 128x128
    • ✅ 勾选 256x256

  4. 转换

    • 等待转换完成

  5. 下载

    • 保存为 icon.ico

步骤3：放置文件

复制到项目：sys-ui\electron\icon.ico

检查

dir d:\svn\yunjian\YJ_SCREEN\sys-ui\electron\icon.ico

# 期望：文件大小 > 50KB

🖥️ 方法2：使用 Photoshop

前提条件

步骤

  1. 创建新文件

    • 尺寸：256x256 像素
    • 分辨率：72 DPI
    • 背景：透明

  2. 设计图标

    • 绘制或导入图形
    • 保持内容居中
    • 留有边距

  3. 导出为 ICO

    • File -> Export -> ICOFormat
    • 选择包含的尺寸：16, 24, 32, 48, 64, 128, 256
    • 保存为 icon.ico

🆓 方法3：使用 GIMP（免费）

下载安装

步骤

  1. 打开图片

    • File -> Open
    • 选择你的 PNG 文件

  2. 调整大小（如果需要）

    • Image -> Scale Image
    • 设置为 256x256 或更大

  3. 导出为 ICO

    • File -> Export As
    • 文件名：icon.ico
    • 文件类型：Microsoft Windows icon (*.ico)
    • 点击 Export

  4. 选择尺寸

    • 在弹出的对话框中
    • 勾选所有尺寸
    • 点击 Export

📐 图标设计建议

1. 尺寸适配

大尺寸（256x256, 128x128）：

  • ✅ 可以有更多细节
  • ✅ 渐变、阴影效果
  • ✅ 复杂的图形

中尺寸（64x64, 48x48）：

  • ✅ 简化细节
  • ✅ 保留主要元素
  • ✅ 清晰的轮廓

小尺寸（32x32, 24x24, 16x16）：

  • ✅ 极简设计
  • ✅ 加粗线条
  • ✅ 高对比度
  • ✅ 去除不必要的细节

2. 颜色和对比度

推荐：

  • ✅ 使用高对比度颜色
  • ✅ 避免太多颜色（3-5 种）
  • ✅ 深色和浅色都要清晰可见

避免：

  • ❌ 低对比度（如浅灰色）
  • ❌ 太多渐变
  • ❌ 太细的线条

3. 内容布局

推荐布局：

┌─────────────────┐
│  留边距 10-15%  │
│  ┌───────────┐  │
│  │           │  │
│  │   图标    │  │  ← 内容居中
│  │   内容    │  │     不要太靠边
│  │           │  │
│  └───────────┘  │
│                 │
└─────────────────┘

避免：

┌─────────────────┐
│┌───────────────┐│  ← ❌ 内容太靠边
││               ││     会被裁剪
││    图标内容   ││
││               ││
│└───────────────┘│
└─────────────────┘

🧪 测试方法

测试1：检查文件

# 查看文件信息
dir d:\svn\yunjian\YJ_SCREEN\sys-ui\electron\icon.ico

# 期望：文件大小 > 50KB

测试2：在 Windows 中预览

方法1：资源管理器

1. 打开 electron 文件夹
2. 切换到"大图标"或"超大图标"视图
3. 查看 icon.ico 是否清晰

方法2：属性查看

1. 右键 icon.ico -> 属性
2. 查看图标预览
3. 应该能看到清晰的图标

🔧 常见问题

Q1: 图标文件很小（< 10KB）

原因： 只包含单一尺寸

解决：

  • 重新制作，确保包含所有尺寸
  • 使用在线工具，勾选所有尺寸

Q2: 任务栏图标模糊

原因： 缺少小尺寸图标（16x16, 24x24）

解决：

  • 确保 ICO 包含 16x16 和 24x24 尺寸
  • 小尺寸要单独优化（加粗线条）

Q3: 图标显示"半截"

原因： 图标内容太靠边

解决：

  • 重新设计，内容居中
  • 留有 10-15% 的边距

Q4: 打包后图标没变化

原因： 缓存问题

解决：

# 清理缓存
rmdir /s /q dist_electron

# 重新打包
npm run electron:build

📦 完整流程

流程图

1. 准备 PNG 图片
   ↓
2. 使用在线工具转换为 ICO
   ↓
3. 下载 icon.ico
   ↓
4. 放到 build/icon.ico
   ↓
5. 删除占位符文件
   ↓
6. 重新打包：npm run electron:build
   ↓
7. 测试图标显示
   ↓
8. 完成 ✅

📝 检查清单

🌐 推荐资源

在线工具

免费图标库

设计工具

💡 提示

快速开始

如果你有现成的 PNG 图片：（512x512 或更大）

  1. 打开 https://www.aconvert.com/cn/icon/png-to-ico/open in new window
  2. 上传图片
  3. 勾选所有尺寸
  4. 下载 icon.ico
  5. 放到 electron/icon.ico