工作原理
图片或文字会按浏览器和手机所需的各种尺寸绘制在画布上，再保存为 PNG 文件。16、32 和 48 px 的版本会打包成一个 favicon.ico。全部在浏览器中生成，不会上传任何内容。
favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest
各文件的作用
- favicon.ico：经典的浏览器标签页图标。所有浏览器和 Windows 仍会在网站根目录查找它。
- apple-touch-icon.png：当有人把你的网站添加到主屏幕时，iPhone 和 iPad 使用的图标。它始终带有纯色背景。
- icon-192.png, icon-512.png：Android 和可安装的 Web 应用（PWA）会通过 manifest 使用这些图标。
- site.webmanifest：一个小型 JSON 文件，包含网站名称、颜色和图标列表。
小贴士
- 把所有文件放在网站根目录（与 index.html 同一位置），并把代码粘贴到每个页面的 head 中。
- 简单、粗重的形状在 16 px 下最清晰；细小的文字和细线会看不见。
- 浏览器会长时间缓存 favicon。要查看更改，请直接打开图标网址或使用无痕窗口。
- theme-color 标签会让 Android 上的浏览器地址栏显示为你的背景色。
标准与出处
- HTML Standard — link rel="icon" · WHATWG
- Web Application Manifest · W3C
- Configuring Web Applications（apple-touch-icon）· Apple Developer
最后核对于 2026年10月15日
常见问题
我需要哪些尺寸的 favicon？
一个包含 16、32 和 48 px 的 favicon.ico、一个 180 px 的 apple-touch-icon，以及用于 Android 的 192 和 512 px 图标，即可覆盖当前的浏览器和手机。
我的标志会被上传吗？
不会。图标在你的浏览器中绘制和打包。
可以使用 SVG 吗？
可以。支持 SVG、PNG、JPG、WebP 和 GIF；使用 512 px 或以上的正方形图片效果最清晰。
为什么 Apple 图标不是透明的？
iOS 会把透明区域填成黑色，所以 180 px 图标始终使用你的背景色。
新的 favicon 没有显示出来。
浏览器会长时间缓存 favicon。请直接打开图标地址、清除缓存或使用无痕窗口试试。