Favicon 转换器
用一张光栅图像创建网站添加 favicon 所需的文件。选择源图在正方形画布中的适配方式并设置背景,然后下载 ZIP,其中包含多尺寸 ICO、7 个 PNG 图标、Web 应用 manifest、Windows 磁贴配置,以及可直接复制的 head HTML 代码。图像转换与 ZIP 打包均在浏览器中本地完成。
如何将图像转换成 favicon 文件包
-
1
选择光栅图像
选择符合页面所示文件大小和图像尺寸限制的 PNG、JPEG 或 WebP。不接受 SVG、GIF 和 AVIF 文件。
-
2
选择适配方式
使用“填满并裁剪”让图像填满正方形并裁去边缘,或使用“完整显示并留边”保留整张图像,在四周添加留白。
-
3
设置背景
为透明像素和“完整显示并留边”模式产生的空白选择背景颜色,然后查看生成的预览图。
-
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.webmanifest 与 browserconfig.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 分钟。这种本地传递不是上传到服务器。
相关工具
GIF 制作器
将一组图片或短视频转换为动画 GIF。导出前可调整帧率、循环次数和尺寸。
PNG 转 SVG 矢量化工具
在浏览器中把 PNG 栅格图像转换为 SVG 路径。适合徽标、图标和线稿。可控制阈值、颜色数量和平滑度。
图片尺寸调整器
将图片调整到精确的像素尺寸或百分比,同时保持宽高比。适合批量准备图片,无需上传。
图像放大器
使用 AI 超分辨率或经典插值,将低分辨率图像放大 2×、3× 或 4×,同时保留重要细节。
SVG 转 PNG
在浏览器中将 SVG 文件或 SVG 标记转换为 PNG,选择缩放因子,并保持透明边缘清晰。
BMP 转 PNG
在浏览器中将 BMP 文件转换为 PNG。无损,保留色深,并可从原始 BMP 的 alpha 通道添加可选透明度。