Favicon 转换器

用一张光栅图像创建网站添加 favicon 所需的文件。选择源图在正方形画布中的适配方式并设置背景,然后下载 ZIP,其中包含多尺寸 ICO、7 个 PNG 图标、Web 应用 manifest、Windows 磁贴配置,以及可直接复制的 head HTML 代码。图像转换与 ZIP 打包均在浏览器中本地完成。

如何将图像转换成 favicon 文件包

  1. 1

    选择光栅图像

    选择符合页面所示文件大小和图像尺寸限制的 PNG、JPEG 或 WebP。不接受 SVG、GIF 和 AVIF 文件。

  2. 2

    选择适配方式

    使用“填满并裁剪”让图像填满正方形并裁去边缘,或使用“完整显示并留边”保留整张图像,在四周添加留白。

  3. 3

    设置背景

    为透明像素和“完整显示并留边”模式产生的空白选择背景颜色,然后查看生成的预览图。

  4. 4

    下载并安装

    下载 ZIP,将图标和配置文件放到网站上,再把提供的 link 标签复制到文档的 head 中。

ZIP 包含的内容

文件 用途
favicon.ico 一个包含 16、32、48 和 256 px 图像的 ICO 容器,供请求传统 favicon 路径的浏览器和软件使用
favicon-16x16.png 用于浏览器标签页和其他小尺寸位置的紧凑 PNG
favicon-32x32.png 用于高像素密度浏览器标签页和书签的图标
favicon-48x48.png 用于桌面和快捷方式的附加尺寸
mstile-150x150.png Windows 磁贴配置所引用的 150 x 150 PNG
apple-touch-icon.png 用于 Apple 主屏幕链接的 180 x 180 PNG
android-chrome-192x192.png Web 应用 manifest 所引用的 192 x 192 应用图标
android-chrome-512x512.png Web 应用 manifest 所引用的 512 x 512 应用图标
site.webmanifest 将兼容浏览器指向 192 px 和 512 px 图标的 JSON 元数据
browserconfig.xml 引用已生成图标资源的 Windows 磁贴配置
favicon-head.html 可直接复制的标签,用于将页面关联到 ICO、PNG、Apple 图标、manifest 和浏览器配置

ICO 与 PNG 文件有意分开提供。浏览器和操作系统选择图标的方式不同,因此完整文件包既能满足传统的 /favicon.ico 请求,也能满足明确的现代图标声明。

HTML head 标签

下载的文件包中包含如下形式的代码:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">

如果文件位于子目录或单独的资源主机,请先修改路径,再将标签粘贴到 <head> 中。site.webmanifestbrowserconfig.xml 内的文件名和路径也应与实际部署的文件保持一致。

填满、完整显示与背景选项

  • 填满并裁剪会用图像填满每个正方形输出。较宽或较高的源图会从相对的两边等量裁切,因此重要图案应靠近中央。
  • 完整显示并留边会保留整张源图。未使用的空间会成为所选背景色的留边。
  • 背景可以保持透明,也可以使用自定义纯色。在完整显示并留边模式下,此选项也会控制图像周围留边的颜色。发布前请在浅色和深色页面主题下检查预览。

为了让小图标尽量清晰,建议使用至少 512 x 512 像素、设计简洁的正方形图像。即使源图很大,细字体、极细线条和微小细节也可能在 16 px 版本中消失。

输入限制与文件放置

本转换器只接受 PNG、JPEG 和 WebP 光栅图像。工具会检查图像文件签名,并拒绝 SVG、GIF、AVIF 及其他未列出的格式。源文件最大为 20 MiB,任意一边不得超过 8,192 像素,总像素数不得超过 2400 万像素。系统会在完整解码图像前检查尺寸限制。

下载后请解压 ZIP,并将生成的文件上传到代码所使用的路径。/favicon.ico 这类根相对路径表示文件可从当前域名的根目录访问。替换现有 favicon 时,请清除网站或 CDN 缓存,因为浏览器通常会比普通页面资源更长时间地缓存图标文件。

随附的 manifest 提供图标元数据,但仅有 manifest 和图标集并不会让网站自动成为可安装的渐进式 Web 应用。能否安装还取决于页面本身、传输安全性和各浏览器的要求。

常见问题

可以使用 PNG、JPEG 或 WebP。转换器会检查文件签名,而不是只相信文件名,并会拒绝 SVG、GIF、AVIF 和其他格式。

填满并裁剪会缩放图像直至正方形被填满;如果宽高比不是正方形,则从相对的两边等量裁切。完整显示并留边会保留整张图像,并以所选背景色填充正方形的剩余区域。

ICO 是一种容器,可将多个小尺寸图标存放在一个传统 favicon 文件中。单独的 PNG 则为浏览器和平台提供尺寸明确的资源,用于标签页、主屏幕链接和应用图标。两种格式同时保留可提高实际兼容性。

不会。manifest 描述生成的应用图标和相关显示元数据,但能否安装取决于其他浏览器要求,以及网站本身的构建和提供方式。

提供的代码使用根相对路径,因此最简单的做法是将解压后的文件放在域名根目录。如果使用其他文件夹或资源主机,请同时修改代码、manifest 和浏览器配置中的路径。

不会。图像处理与 ZIP 创建均在浏览器中进行。在多步骤流程中,为了在步骤间传递图像,IndexedDB 草稿可能会在此浏览器中保存图像最多 30 分钟。这种本地传递不是上传到服务器。

相关工具