favicon 与 PWA 指南
查看网站与 PWA 常用图标文件清单。
SVG 转 Favicon、PNG 图标与 ZIP
将 SVG 转为网站图标包，检查栅格化效果、调整颜色与留边，再下载 PNG、ICO 和网站清单文件。
SVG 输入建议
- 推荐使用静态 SVG，避免脚本、foreignObject 与外部资源引用。
- 结构越简洁，导出到多尺寸 PNG 的一致性越高。
- 若渲染结果与预期差异较大，建议简化 SVG 或改用 PNG。
实操流程
- 上传 SVG，确认原图预览与主体边界识别正常。
- 按需求切换“原始颜色/自定义颜色”，并设置留边模式。
- 导出前检查小尺寸预览，避免细线丢失或填充异常。
- 下载 ZIP，获得 favicon、Apple/PWA/maskable 与 site.webmanifest。
完整案例
输入： 用于 SaaS 官网的单色 SVG logo。
设置： 自定义图标色 #2563eb + 平衡留边 + 透明背景。
输出： 各尺寸图标在颜色和留边上保持一致，可直接部署。
SVG 转换提示
- 内联 fill 通常比 CSS 变量或外部样式更容易稳定转换。
- 如果自定义颜色不符合预期，先把 SVG 简化成单色实心图形。
- 保留原始 SVG 和导出的 ZIP，方便后续重复生成同一套图标。
常见问题
复杂 SVG 滤镜能完全保真吗？
不一定。复杂滤镜、外链字体等在栅格化后可能出现差异。
SVG 自定义颜色是怎么生效的？
工具会按渲染后的 alpha 区域做单色覆写，保持图标风格统一。
SVG 输入也能导出 favicon.ico 吗？
可以。SVG 会先渲染到画布，再进入同一套 PNG/ICO 导出流程。
什么时候用原始颜色，什么时候用自定义？
品牌色已固定时用原始颜色；需要单色系统时用自定义颜色。
相关图标场景
Maskable 安全区指南
导出 maskable 图标时避免主体被裁切。