# SVG Favicon 生成器

将 SVG 或位图 Logo 生成完整的 favicon 套件，包括 ICO、多个 PNG 尺寸、Apple Touch Icon 和 site.webmanifest

> 标准页面: https://elysiatools.com/zh/tools/svg-favicon-generator

- **分类:** Media

- **关键词:** svg, favicon, icon, manifest, apple touch icon, logo

## 概述

SVG Favicon 生成器是一款专为前端开发者和设计师打造的实用工具，能够将 SVG 或位图 Logo 一键转换为符合现代 Web 标准的完整 Favicon 套件。只需上传源文件，即可自动生成包含 ICO、多尺寸 PNG、Apple Touch Icon 以及 site.webmanifest 的压缩包，并支持自定义背景色、适配模式和留白比例，帮助您轻松适配各类浏览器和移动设备。

## 输入项

- **源 Logo 文件** (file)
- **背景颜色** (color)
- **适配模式** (select)
- **留白比例（%）** (range)
- **站点名称** (text)
- **主题颜色** (color)

## 适用场景

- 新网站上线前，需要快速生成适配全平台（PC端、iOS、Android）的标准化网站图标套件时。
- 现有的网站图标在某些高分屏或移动设备上显示模糊，需要使用 SVG 矢量图重新生成高清图标时。
- 开发 PWA（渐进式 Web 应用）时，需要快速生成包含 site.webmanifest 和对应尺寸图标的配置文件时。

## 工作原理

- 上传您的源 Logo 文件，支持 SVG 矢量图以及 PNG、JPEG、WebP 等常见位图格式。
- 根据设计需求调整背景颜色、适配模式（Contain 或 Cover）以及留白比例，并填写站点名称和主题颜色。
- 工具会自动按标准尺寸裁剪并生成 ICO、多尺寸 PNG、Apple Touch Icon 以及 manifest 文件。
- 下载生成的 ZIP 压缩包，解压后将文件部署到网站根目录，即可完成全平台的图标配置。

## 使用案例

- 前端开发者为企业官网配置跨浏览器兼容的 Favicon 和 Apple Touch Icon。
- UI/UX 设计师将设计好的 SVG Logo 快速导出为开发可用的标准化图标资源包。
- 独立开发者在构建 PWA 应用时，一键生成所需的 manifest 配置文件及全套应用图标。

## 常见问题

### 支持哪些格式的源文件？

支持上传 SVG 矢量图以及 PNG、JPEG、WebP 等位图格式。推荐使用 SVG 格式以获得最佳的缩放清晰度。

### 生成的压缩包里包含哪些文件？

包含标准的 favicon.ico、多个尺寸的 favicon-xx.png、apple-touch-icon.png 以及用于 PWA 的 site.webmanifest 文件。

### Contain 和 Cover 适配模式有什么区别？

Contain 模式会保持 Logo 完整显示并在边缘留白；Cover 模式会让 Logo 填满整个图标区域，可能会裁剪掉超出边缘的部分。

### 留白比例（Padding）有什么作用？

留白比例用于控制 Logo 与图标边缘的距离。适当的留白（如 8%-10%）能让图标在浏览器标签页或手机桌面上视觉效果更舒适。

### 为什么需要填写站点名称和主题颜色？

这些信息会被写入 site.webmanifest 文件中。当用户将您的网站添加到手机主屏幕时，系统会读取这些配置来显示应用名称和状态栏颜色。

## 相关工具

- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [图片水印工具](https://elysiatools.com/zh/tools/image-watermark-image): 为图片添加图片水印，可自定义位置、大小、透明度和旋转角度
- [PDF品牌手册](https://elysiatools.com/zh/tools/pdf-brand-guidelines-pdf): 生成包含Logo、色板、字体和间距规范的品牌手册PDF
- [图片角落水印工具](https://elysiatools.com/zh/tools/image-watermark-corner): 为图片添加角落水印，可自定义位置、大小、透明度和多角落选项
- [图片透明度水印工具](https://elysiatools.com/zh/tools/image-watermark-opacity): 为图片添加具有自定义透明度的水印，支持文字和图片水印，具有高级透明度控制功能
- [PDF页眉页脚片段](https://elysiatools.com/zh/tools/pdf-header-footer-snippets): 将HTML转换为PDF，并插入Logo/标题/日期等页眉页脚片段
- [图片对角水印工具](https://elysiatools.com/zh/tools/image-watermark-diagonal): 为图片添加对角水印，可自定义角度、大小、透明度和沿对角线位置
- [图片平铺水印工具](https://elysiatools.com/zh/tools/image-watermark-tile): 为图片添加平铺水印，可自定义大小、透明度、间距和图案样式

## 示例

- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

- [SVG、Favicon 与图标资产工作流工具](https://elysiatools.com/zh/hubs/svg-favicon-icon-workflows): 在一个专题中完成 favicon 套件生成、SVG 优化、ICO/PNG/JPG/WebP/SVG 之间的图标转换，以及面向网页交付的图像资产准备。
- [图片格式转换与动画导出工具](https://elysiatools.com/zh/hubs/image-convert): 在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
- [XML 转换、映射与 XPath 工具](https://elysiatools.com/zh/hubs/xml-convert): 围绕XML 转换、映射、合并与 XPath 提取整理的一组工具。
- [图片整理、修饰与批处理准备工具](https://elysiatools.com/zh/hubs/image-utility): 把图片清理、裁边、补边、加框、批量缩放压缩、水印和视觉修饰工具集中到一个专题中，适合素材整理流程。