SVG2Icon 用户手册
手册：svg2icon-user-v1.1.0（中文）
欢迎！SVG2Icon 可以把一份 SVG 快速转换为适用于 Web、移动端和桌面的生产级图标集，流程简单、结果可预测。
使用左侧目录浏览主题。本页提供一个总体导览，帮你快速了解能做什么。
你可以做什么
- 通过添加 SVG 和清晰的项目名来创建或编辑项目
- 生成 Web、移动端（iOS + Android）、桌面图标集，或选择“全部”一次性打包
- 自选保存位置；ZIP 命名为：
<项目名> - <下载选择> - svg2icon.zip，若文件夹已存在会自动追加(n)后缀 - 操作后会显示友好的通知提示
平台与安装
- Windows 与 Linux（.deb / .rpm）
- 打包版本：安装即用，无需额外工具
- 开发版本：
npm install后运行npm run dev
60 秒快速体验
- 点击“New SVG”，拖入你的 SVG，确认名称（默认取自文件名）
- 保存——项目会出现在表格中
- 点击一个下载选项（Web / Mobile / Desktop / All）
- 选择保存位置；右下角会弹出完成通知
- 需要原图？随时点击该行的 “SVG” 按钮下载原始文件
输出一览
<项目名> - <下载选择> - svg2icon.zip/
├─ web/
│ ├─ favicon-16.png
│ ├─ favicon-32.png
│ ├─ favicon.ico
│ ├─ apple-touch-icon-57.png
│ ├─ apple-touch-icon-60.png
│ ├─ apple-touch-icon-72.png
│ ├─ apple-touch-icon-76.png
│ ├─ apple-touch-icon-114.png
│ ├─ apple-touch-icon-120.png
│ ├─ apple-touch-icon-144.png
│ ├─ apple-touch-icon-152.png
│ ├─ apple-touch-icon-180.png
│ ├─ manifest-192.png
│ ├─ manifest-512.png
│ ├─ manifest.json
│ └─ icons-head.html
├─ mobile/
│ ├─ ios-icons/
│ │ ├─ icon-20@1x.png
│ │ ├─ icon-20@2x.png
│ │ ├─ icon-20@3x.png
│ │ ├─ icon-29@1x.png
│ │ ├─ icon-29@2x.png
│ │ ├─ icon-29@3x.png
│ │ ├─ icon-40@1x.png
│ │ ├─ icon-40@2x.png
│ │ ├─ icon-40@3x.png
│ │ ├─ icon-60@2x.png
│ │ ├─ icon-60@3x.png
│ │ ├─ icon-76@1x.png
│ │ ├─ icon-76@2x.png
│ │ ├─ icon-83.5@2x.png
│ │ └─ icon-1024@1x.png
│ └─ android-icons/
│ ├─ mipmap-ldpi/
│ │ └─ ic_launcher.png
│ ├─ mipmap-mdpi/
│ │ └─ ic_launcher.png
│ ├─ mipmap-hdpi/
│ │ └─ ic_launcher.png
│ ├─ mipmap-xhdpi/
│ │ └─ ic_launcher.png
│ ├─ mipmap-xxhdpi/
│ │ └─ ic_launcher.png
│ ├─ mipmap-xxxhdpi/
│ │ └─ ic_launcher.png
│ └─ playstore-icon.png
├─ desktop/
│ ├─ icon-16.png
│ ├─ icon-24.png
│ ├─ icon-32.png
│ ├─ icon-48.png
│ ├─ icon-64.png
│ ├─ icon-96.png
│ ├─ icon-128.png
│ ├─ icon-256.png
│ ├─ icon-512.png
│ ├─ icon-1024.png
│ ├─ icon.ico
│ └─ icon.icns
└─ svg/
└─ <项目名>_original.svg
Web
| 文件名 | 用途 |
|---|---|
| favicon-16.png | 浏览器标签/书签图标（16×16） |
| favicon-32.png | 浏览器标签/书签图标（32×32） |
| favicon.ico | 传统多尺寸图标 |
| apple-touch-icon-57.png | iOS Touch 图标（57×57） |
| apple-touch-icon-60.png | iOS Touch 图标（60×60） |
| apple-touch-icon-72.png | iOS Touch 图标（72×72） |
| apple-touch-icon-76.png | iOS Touch 图标（76×76） |
| apple-touch-icon-114.png | iOS Touch 图标（114×114） |
| apple-touch-icon-120.png | iOS Touch 图标（120×120） |
| apple-touch-icon-144.png | iOS Touch 图标（144×144） |
| apple-touch-icon-152.png | iOS Touch 图标（152×152） |
| apple-touch-icon-180.png | iOS Touch 图标（180×180，常见） |
| manifest-192.png | Android/Chrome 图标（192×192） |
| manifest-512.png | Android/Chrome 图标（512×512） |
| manifest.json | 生成元数据（用于本图标集） |
| icons-head.html | 可复制到页面 <head> 的 HTML 引用 |
在 HTML 中引用：
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="/web/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/web/favicon-32.png">
<link rel="icon" href="/web/favicon.ico">
<!-- Apple touch icons (iOS) -->
<link rel="apple-touch-icon" sizes="57x57" href="/web/apple-touch-icon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/web/apple-touch-icon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/web/apple-touch-icon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/web/apple-touch-icon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/web/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/web/apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/web/apple-touch-icon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/web/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/web/apple-touch-icon-180.png">
<!-- Android/Chrome icons -->
<link rel="icon" type="image/png" sizes="192x192" href="/web/manifest-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/web/manifest-512.png">
<!-- Optional mobile meta -->
<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
记住：上述标签与
web/icons-head.html中一致。该文件是静态示例——你只需根据站点路径做相应调整。
iOS
| 文件名 | 用途 |
|---|---|
| icon-20@1x/2x/3x.png | 通知/角标尺寸 |
| icon-29@1x/2x/3x.png | 设置与 Spotlight |
| icon-40@1x/2x/3x.png | Spotlight/App 尺寸 |
| icon-60@2x/3x.png | iPhone App 图标 |
| icon-76@1x/2x.png | iPad App 图标 |
| icon-83.5@2x.png | iPad Pro 图标 |
| icon-1024@1x.png | App Store 资源 |
| manifest.json | 生成元数据（用于本图标集） |
Android
| 文件名 | 用途 |
|---|---|
| mipmap-ldpi/ic_launcher.png | 启动器（ldpi） |
| mipmap-mdpi/ic_launcher.png | 启动器（mdpi） |
| mipmap-hdpi/ic_launcher.png | 启动器（hdpi，约 1.5×） |
| mipmap-xhdpi/ic_launcher.png | 启动器（xhdpi） |
| mipmap-xxhdpi/ic_launcher.png | 启动器（xxhdpi） |
| mipmap-xxxhdpi/ic_launcher.png | 启动器（xxxhdpi） |
| playstore-icon.png | 商店列表封面 |
| manifest.json | 生成元数据（用于本图标集） |
桌面端
| 文件名 | 用途 |
|---|---|
| icon-16.png | 应用图标（16×16） |
| icon-24.png | 应用图标（24×24） |
| icon-32.png | 应用图标（32×32） |
| icon-48.png | 应用图标（48×48） |
| icon-64.png | 应用图标（64×64） |
| icon-96.png | 应用图标（96×96） |
| icon-128.png | 应用图标（128×128） |
| icon-256.png | 应用图标（256×256） |
| icon-512.png | 应用图标（512×512） |
| icon-1024.png | 应用图标（1024×1024） |
| icon.ico | Windows 图标包 |
| icon.icns | macOS 图标包 |
| manifest.json | 生成元数据（用于本图标集） |
手册标记
实用提示，帮你更顺手 Remember: 重要要点，避免踩坑 Warning: 易错事项，务必注意 Technical Stuff: 背景/原理（可选阅读）
