SVG Favicon 生成器

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

示例结果

2 个示例

从 SVG 生成标准 favicon 套件

根据矢量 Logo 生成 ICO、PNG、Apple Touch Icon、manifest 和可直接粘贴的 HTML 片段

svg-favicon-generator-example1.zip 查看文件
查看输入参数
{ "sourceFile": "/public/samples/svg/01-basic-shapes.svg", "backgroundColor": "#ffffff", "fitMode": "contain", "paddingPercent": 10, "siteName": "Studio Atlas", "themeColor": "#0f172a" }

用位图 Logo 构建应用图标套件

当源素材是 PNG 时，使用 cover 适配和深色主题生成一整套 favicon 文件

svg-favicon-generator-example2.zip 查看文件
查看输入参数
{ "sourceFile": "/public/samples/images/logo.png", "backgroundColor": "#020617", "fitMode": "cover", "paddingPercent": 4, "siteName": "North Grid", "themeColor": "#020617" }

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/svg+xml, image/png, image/jpeg, image/webp

0 8 35

关键信息

分类
图像、音频与视频
输入类型
file, color, select, range, text
输出类型
file
样本覆盖
4
支持 API
Yes

概览

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

适用场景

  • •新网站上线前，需要快速生成适配全平台（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 配置文件及全套应用图标。

用户案例

1. 从 SVG 生成标准网站图标套件

前端开发者
背景原因
正在开发一个全新的企业官网，设计师只提供了一个 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 包，直接部署到网站根目录即可生效。

2. 用位图 Logo 构建深色主题应用图标

独立开发者
背景原因
正在开发一款暗黑风格的 Web 应用，手头只有一张高分辨率的 PNG 透明底 Logo。
解决问题
需要生成适配 iOS 主屏幕的图标，且要求图标背景为深色，Logo 尽可能充满图标区域。
如何使用
上传 logo.png，将背景颜色设为深色 #020617，适配模式改为 cover，留白比例调小至 4%，填写站点名称 North Grid。
示例配置
背景颜色: #020617, 适配模式: cover, 留白比例: 4, 站点名称: North Grid, 主题颜色: #020617
效果
生成了一套带有深色背景的图标，Logo 完美填充图标区域，在 iOS 设备上添加到主屏幕时显示效果极佳。

用 Samples 测试

xml, image, png
SVG示例
可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
title token svg
image
Web Python 图像处理示例
Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
preferred input family image
image
Android Java 图像处理示例
Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
preferred input family image
image
Android Kotlin 图像处理示例
Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
preferred input family image
image

相关专题

图片格式转换与动画导出工具
在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
视频转音频与动画格式转换工具
在一个专题里比较把视频转成音频、提取视频流，以及在短视频与动态图格式之间转换的工具。
XML 转换、映射与 XPath 工具
围绕XML 转换、映射、合并与 XPath 提取整理的一组工具。
图片整理、修饰与批处理准备工具
把图片清理、裁边、补边、加框、批量缩放压缩、水印和视觉修饰工具集中到一个专题中，适合素材整理流程。

常见问题

支持哪些格式的源文件？

支持上传 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 文件中。当用户将您的网站添加到手机主屏幕时，系统会读取这些配置来显示应用名称和状态栏颜色。

API 文档

请求端点

POST /zh/api/tools/svg-favicon-generator

请求参数

参数名 类型 必填 描述
sourceFile file (需要先上传) 是 -
backgroundColor color 否 -
fitMode select 否 -
paddingPercent range 否 -
siteName text 否 -
themeColor color 否 -

文件类型参数需要先通过 POST /upload/svg-favicon-generator 上传获取 filePath，然后将 filePath 传递给对应的文件字段。

响应格式

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
文件: 文件

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-svg-favicon-generator": {
      "name": "svg-favicon-generator",
      "description": "将 SVG 或位图 Logo 生成完整的 favicon 套件，包括 ICO、多个 PNG 尺寸、Apple Touch Icon 和 site.webmanifest",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=svg-favicon-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

支持 URL 文件链接或 Base64 编码作为文件参数。

如果遇见问题，请联系我们：[email protected]