Elysia Tools
导航
Media
将 SVG 或位图 Logo 生成完整的 favicon 套件，包括 ICO、多个 PNG 尺寸、Apple Touch Icon 和 site.webmanifest
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
SVG Favicon 生成器是一款专为前端开发者和设计师打造的实用工具，能够将 SVG 或位图 Logo 一键转换为符合现代 Web 标准的完整 Favicon 套件。只需上传源文件，即可自动生成包含 ICO、多尺寸 PNG、Apple Touch Icon 以及 site.webmanifest 的压缩包，并支持自定义背景色、适配模式和留白比例，帮助您轻松适配各类浏览器和移动设备。
背景
正在开发一个全新的企业官网，设计师只提供了一个 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 文件中。当用户将您的网站添加到手机主屏幕时，系统会读取这些配置来显示应用名称和状态栏颜色。