Elysia Tools
导航
Media
· 最后更新：2026-03-22
将 SVG 或位图 Logo 生成完整的 favicon 套件，包括 ICO、多个 PNG 尺寸、Apple Touch Icon 和 site.webmanifest
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
SVG Favicon 生成器是一款专为前端开发者和设计师打造的实用工具，能够将 SVG 或位图 Logo 一键转换为符合现代 Web 标准的完整 Favicon 套件。只需上传源文件，即可自动生成包含 ICO、多尺寸 PNG、Apple Touch Icon 以及 site.webmanifest 的压缩包，并支持自定义背景色、适配模式和留白比例，帮助您轻松适配各类浏览器和移动设备。
将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
按网格生成缩略图接触表，并附带文件名与EXIF信息
适合
不适合
超大文件
大文件处理更慢，还可能触及浏览器内存上限——请先用小样本测试。
不检查输出结果
正式使用前，请先把输出的前几行或前几页与输入对照检查。
非常规导出工具生成的文件
有些文件用了不常见的格式变体，转换可能不干净——如果输出异常，请用原应用重新保存后再试。
背景
正在开发一个全新的企业官网，设计师只提供了一个 SVG 格式的 Logo 源文件。
问题
需要手动导出多种尺寸的 PNG 和 ICO 文件，并编写 manifest，过程繁琐且容易遗漏尺寸。
如何使用
上传 logo.svg，设置背景色为白色 #ffffff，适配模式选择 contain，留白比例设为 10%，填写站点名称 Studio Atlas。
背景颜色: #ffffff, 适配模式: contain, 留白比例: 10, 站点名称: Studio Atlas, 主题颜色: #0f172a结果
一键下载包含 favicon.ico、多尺寸 PNG、apple-touch-icon.png 和 site.webmanifest 的 ZIP 包，直接部署到网站根目录即可生效。
背景
正在开发一款暗黑风格的 Web 应用，手头只有一张高分辨率的 PNG 透明底 Logo。
问题
需要生成适配 iOS 主屏幕的图标，且要求图标背景为深色，Logo 尽可能充满图标区域。
如何使用
上传 logo.png，将背景颜色设为深色 #020617，适配模式改为 cover，留白比例调小至 4%，填写站点名称 North Grid。
背景颜色: #020617, 适配模式: cover, 留白比例: 4, 站点名称: North Grid, 主题颜色: #020617结果
生成了一套带有深色背景的图标，Logo 完美填充图标区域，在 iOS 设备上添加到主屏幕时显示效果极佳。
支持上传 SVG 矢量图以及 PNG、JPEG、WebP 等位图格式。推荐使用 SVG 格式以获得最佳的缩放清晰度。
包含标准的 favicon.ico、多个尺寸的 favicon-xx.png、apple-touch-icon.png 以及用于 PWA 的 site.webmanifest 文件。
Contain 模式会保持 Logo 完整显示并在边缘留白；Cover 模式会让 Logo 填满整个图标区域，可能会裁剪掉超出边缘的部分。
留白比例用于控制 Logo 与图标边缘的距离。适当的留白（如 8%-10%）能让图标在浏览器标签页或手机桌面上视觉效果更舒适。
这些信息会被写入 site.webmanifest 文件中。当用户将您的网站添加到手机主屏幕时，系统会读取这些配置来显示应用名称和状态栏颜色。