svg2img

SVG 转 Favicon 网站图标

为网站制作清楚易认的图标。查看浏览器标签页效果，调整间距，下载配套文件和安装说明。

Advertisement

可以直接安装的网站图标包

在真实用途里预览

在深浅标签页背景上查看 16px 图标，选择小尺寸下仍然清晰的简洁标志。

一次下载完整文件

ZIP 包含 favicon.ico（16/32/48px）、favicon.svg、180px Apple Touch PNG、192/512px PNG、manifest、HTML 和 README。

文件与安装代码对应

将图标和 manifest 放在网站根目录，并把配套链接加入页面 head。如果使用子目录，需修改 HTML 中的路径。

如何使用

  1. 1

    上传 SVG Logo 或粘贴代码。

  2. 2

    设置网站名称、留白与背景，检查标签页预览。

  3. 3

    下载 ZIP，放置文件并添加安装代码。

从一份 SVG，准备网站所需的图标文件

Favicon 帮助用户在浏览器标签页和书签中识别网站，添加到主屏幕时还可能需要更大的图标。本工具将 SVG 按比例放入方形，生成相关文件和匹配的安装代码。SVG 保留矢量形式，PNG 和 ICO 中的图片则具有固定像素尺寸。

Favicon ZIP 中每个文件有什么用？

左右滑动可查看完整表格 →

文件尺寸或内容用途
favicon.ico16 × 16、32 × 32、48 × 48包含多个尺寸的 ICO 备用图标。
favicon.svg512 × 512 viewBox包含所选留白和背景的可缩放 SVG 图标。
apple-touch-icon.png180 × 180Apple 主屏幕图标。
icon-192.png / icon-512.png192 × 192 / 512 × 512由 manifest 引用的位图图标。
site.webmanifest网站名称和图标路径基础 manifest，不等于完整 PWA 配置。
head.html / README.txtHTML 和安装说明供安装时参考，不应作为图标地址引用。

生成前，先检查小尺寸效果

  1. 01用 16px 标签页预览检查

    删除缩小后无法辨认的细字或装饰线。宽幅 Logo 可能需要一个紧凑版本，才能在方形中清楚显示。

  2. 02平衡留白与对比度

    从默认每侧 8% 留白开始，检查浅色和深色预览。深色预览只是在另一种背景下显示相同图标，不会自动生成独立的深色模式素材。

  3. 03填写容易识别的网站名称

    名称用于 manifest 和标签页预览，不会修改网站自身的 HTML 标题。已有 PWA 配置时，请保留原 manifest 的其他设置。

如何安装生成的 favicon 文件？

  1. 解压 ZIP，将图标图片和 site.webmanifest 放在托管服务映射到域名根目录的 public 目录。直接访问 /favicon.svg，确认得到图片，而不是 404 或首页。
  2. 将下方链接加入页面 HTML 的 head。如果框架管理图标元数据，则在框架配置中填写相同路径，并移除冲突的旧图标声明。
  3. 若使用 /assets/icons/ 等子目录，请修改 HTML 中的 href。manifest 内的图片路径相对于 manifest，保持两张 PNG 与其同目录，或同步修改路径。已有 manifest 时应合并图标条目，不要覆盖整份配置。
  4. 部署图片和页面配置后，在新的浏览会话中检查。若仍显示旧图标，查看实际请求的文件地址；缓存中的旧标签页不代表安装失败。
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Favicon 没有显示时怎么排查？

一直显示旧图标
检查已部署的 head 和资源地址，再使用新会话测试。浏览器会缓存图标，也要删除指向旧文件的重复声明。
图标空白或不易辨认
检查 16px 的明暗背景预览。透明白色 Logo 在白色标签页上可能无法辨认，可添加合适底色或换成对比度更好的图案。
Manifest 找不到图片
直接打开 site.webmanifest，按其所在目录解析图标路径。将 icon-192.png 和 icon-512.png 放在同目录，或改成真实存放位置。

SVG 在哪里处理？

转换在浏览器内完成，SVG 不会为了转换上传至本站服务器。跨工具携带的源文件只保存在内存中，刷新后清空。SVG 引用的外部图片或字体可能需要网络请求；文字转路径并嵌入资源，可让文件不再依赖这些外部链接。 查看隐私政策

常见问题

Favicon 一定是 ICO 吗？

不是。网站也可以使用 SVG 和 PNG 图标。此包包含 ICO 备用图标以及标签页、主屏幕图标资源。

下载后的文件放在哪里？

配套 HTML 按域名根目录引用图标和 site.webmanifest。将文件放入网站 public 目录，再把链接加入页面 head。README 包含框架及子目录使用提示。

有 manifest 就是可安装的 PWA 吗？

此 manifest 提供网站名称和图标。完整 PWA 还可能需要更多配置和应用能力，本工具负责准备图标资源。

为什么网站仍然显示旧图标？

检查文件地址和 head 声明，移除冲突的旧图标配置，并在新的浏览会话中测试。浏览器经常缓存 favicon。

安装后会立即出现在 Google 搜索结果中吗？

不会。请在首页设置图标引用，允许 Google 抓取首页和图标，并等待重新抓取。Google 不保证展示 favicon，具体要求可查看下方官方说明。

已有 web manifest 必须替换吗？

不需要。合并新的图标条目，并保留已有应用设置即可。生成的 manifest 只提供名称和两个图标条目。

技术参考: Google 搜索：网站 favicon 要求

继续处理你的 SVG

相关使用指南

↑ 返回转换工具