分类

← View All Tools

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

关键信息

分类
Media
输入类型
file, color, select, range, text
输出类型
file
样本覆盖
4
支持 API
Yes

概览

SVG Favicon 生成器可以把 SVG 或位图 Logo 一次性转换成完整的网站图标套件，包含 ICO、PNG、多端图标和 site.webmanifest。

适用场景

  • •当你只有一个 SVG Logo，但上线前需要完整 favicon 资源时。
  • •当你希望浏览器标签页、iOS 主屏和 Android manifest 图标保持一致时。

工作原理

  • •上传 SVG 或方形 Logo 图片。
  • •设置背景色、适配模式和留白比例。
  • •下载包含 favicon.ico、PNG、Apple Touch Icon、manifest 和 HTML 片段的 ZIP 包。

使用场景

网站上线前快速补齐全部 favicon 文件。
用同一个品牌 Logo 为 Web App 生成统一的图标资源。

用户案例

1. 从品牌 Logo 生成 favicon 套件

前端开发者
背景原因
设计师给了你一份干净的 SVG Logo。
解决问题
你需要网站上线用的整套 favicon，但不想手动导出每个尺寸。
如何使用
上传 SVG，适配模式选择 contain，背景保持白色。
示例配置
Padding 10%，Theme color #0f172a
效果
得到一个包含主流 favicon 文件、manifest 和 HTML 标签的 ZIP 压缩包。

用 Samples 测试

xml, image, png
SVG示例
可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
title token svg
image
Web Python 图像处理示例
Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
preferred input family image
image
Windows C++ 图像处理示例
Windows C++ 图像处理示例，包括读取/保存图像、调整大小和使用Windows Imaging Component进行格式转换
preferred input family image
image
Web Rust 图像处理示例
Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换
preferred input family image
image

相关专题

XmlConvert工具专题
探索 33 个围绕 xml 的 convert 工作流工具，快速找到相近能力。
ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。
VideoConvert工具专题
探索 36 个围绕 video 的 convert 工作流工具，快速找到相近能力。
Image 工具专题
探索 40 个围绕 image 的 utility 工作流工具，快速找到相近能力。

常见问题

支持 SVG 输入吗？

支持，SVG 可以直接处理，PNG、JPG 这类位图文件也可以使用。

会输出哪些文件？

会输出 favicon.ico、多个 favicon PNG、apple-touch-icon.png、Android 图标、site.webmanifest，以及可直接粘贴的 HTML 代码片段。

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]