上传任意图像,即可获得完整的 favicon 套件:一个多尺寸的 favicon.ico、适用于 Android 和 PWA 的标准尺寸 PNG 图标、用于 iOS 主屏幕的 apple-touch-icon,以及一个 site.webmanifest 文件。README 会准确说明如何将它们添加到你的 HTML。所有文件都打包在一个 ZIP 文件中,可直接放入你的网站根目录。处理在你的浏览器中运行——你的徽标绝不会离开你的设备。
将文件拖放到此处
或 浏览以上传
每个文件最大 10.0 MB
上传你的徽标或图标
为获得最佳效果,请拖入一张正方形图像(推荐 PNG)。正方形源图像可生成最干净的 favicon。非正方形图像将被调整大小以适配每种图标尺寸。
生成 favicon 套件
点击转换以生成完整图标集:favicon.ico(16/32/48/64/128/256px)、icon-32x32.png、apple-touch-icon.png(180×180)、icon-192x192.png、icon-512x512.png 以及 site.webmanifest。
下载 ZIP
所有文件都打包进一个 ZIP 压缩包。解压后,将所有文件上传到你网站的根目录(与 index.html 同级)。
添加 HTML 标签
将随附的 README.txt 中的 link 标签复制到你的 <head> 部分:favicon.ico 链接、PNG 图标链接、apple-touch-icon 链接以及 manifest 链接。
理想情况下为 512×512 像素或更大、正方形、带透明背景(PNG)。源图像会通过高质量的 Lanczos 重采样缩小到每个所需尺寸。简单、醒目、高对比度的设计在 16×16 和 32×32 下效果最佳——细小的文字或纤细的线条会变得难以辨认。如果你的徽标带有文字,可考虑为 favicon 用途制作一个简化的图标版本。
每一个都服务于不同的场景:favicon.ico(所有浏览器和设备)、icon-32x32.png(现代浏览器更倾向 PNG)、apple-touch-icon.png(iOS/macOS 主屏幕,需正好 180×180)、icon-192x192.png(Android 上 Chrome 的标签/任务切换器)、icon-512x512.png(PWA 启动画面和应用商店图标)。全部使用可确保在各处都获得最佳显示效果。
Web 应用清单会向浏览器说明你的网站应用信息:名称、图标、颜色和显示模式。它是渐进式 Web 应用(PWA)所必需的,并允许用户在 Android 上“添加到主屏幕”。浏览器会将清单中的图标用于 Android Chrome、Samsung Internet 及其他基于 Chromium 的移动浏览器。用 <link rel="manifest" href="/site.webmanifest"> 将其添加到你的 HTML。
浏览器会积极地缓存 favicon。请尝试:(1) 强制刷新页面(Ctrl+Shift+R),(2) 清除浏览器缓存,(3) 打开无痕/隐私窗口,(4) 在 HTML 的 favicon URL 后附加一个缓存清除参数:href="/favicon.ico?v=2"。大多数浏览器对 favicon 的缓存独立于页面缓存。
目前不支持 SVG 输入,因为在浏览器中渲染 SVG 需要访问 DOM,而 Web Worker 中无法使用 DOM。请先将你的 SVG 转换为 PNG(使用 Figma、Inkscape 或在线 SVG 转 PNG 转换器),然后从该 PNG 生成你的 favicon 套件。就 Web 用途而言,你也可以在现代浏览器中直接将 SVG 用作 favicon:<link rel="icon" href="/icon.svg" type="image/svg+xml">。
有问题吗？ 报告问题
