Favicon 是做什么用的
Favicon 是显示在浏览器标签页、书签、历史记录里，以及搜索结果中网站名称旁边的小图标。有人把你的网站添加到手机主屏幕时，同一个图标的大尺寸版本就成了应用图标。一个清楚、好认的 favicon，能让人在十几个标签页里一眼找到你的网站；没有 favicon 的网站则显得不完整。而且浏览器每次新访问都会请求 /favicon.ico，文件不存在就会记录一个错误。
文件包里有什么
favicon.ico 在一个文件里包含三张图：16 × 16 像素用于普通屏幕的标签页，32 × 32 用于高分辨率屏幕和 Windows 任务栏，48 × 48 用于桌面快捷方式。里面的图像以 PNG 格式存储，保留透明背景，所有现在的浏览器都支持。
apple-touch-icon.png（180 × 180）在 iPhone 和 iPad 上用 Safari 把网页添加到主屏幕时使用，部分书签视图也会用到。它没有透明背景，因为 iOS 会把透明区域显示成黑色。
icon-192.png 和 icon-512.png 由 site.webmanifest 引用。安卓上的 Chrome 用它们做主屏幕快捷方式和已安装的网页应用图标，512 像素的版本还会显示在已安装应用的启动画面上。清单里的主题色和背景色也会设成你选的颜色。
如果你用的是 SVG 源文件，文件包里还会有 icon.svg。支持矢量 favicon 的浏览器会用它，在任何尺寸和缩放比例下都非常清晰。
怎样得到清晰的图标
所有图标都是从一张 512 × 512 像素的母图用高质量 Lanczos 滤镜缩小得到的，所以请用你手头最大的 Logo 版本，最好是 SVG 或至少 512 像素的 PNG。小图标最适合粗壮的形状和强烈的对比：完整的中文品牌名和标语在 48 像素以下就看不清了，所以很多品牌只用一个字、首字母或图形符号作为 favicon。
透明背景的 Logo 在浅色浏览器主题下很好看，但在深色标签栏上可能看不见。如果你的 Logo 是深色的，可以考虑加一个纯色背景，或者给 Logo 本身加一圈浅色描边。
要先准备好源图片，可以用圆形头像裁剪做一个透明背景的圆形 Logo，或者用图片格式转换把 WebP、HEIC 或 AVIF 格式的图转成 PNG。