favicon 很小，但它对网站识别度很重要。问题是，很多 logo 放进浏览器标签页后会变糊：边缘发虚、文字看不清、圆角像被压扁。
favicon 模糊通常不是浏览器坏了，而是图标资源没有为小尺寸场景准备好。浏览器标签页、收藏夹、快捷方式、搜索结果和系统桌面可能会使用不同尺寸，如果只提供一张不合适的图片，浏览器只能临时缩放。
favicon 为什么会模糊？
- 源图太小：用 32px 图片去生成 128px 或 256px 图标，放大后一定会发虚。
- 只提供单一尺寸：浏览器需要 16px、32px、48px 等不同尺寸时，只能缩放同一张图。
- 图案太复杂：细文字、细线条和复杂渐变在 16px 标签页里很难保持清晰。
- 没有透明边缘：背景没有处理干净，缩小后会出现灰边、白边或锯齿。
- 格式不合适：直接把 JPG 当 favicon 用，透明背景会丢失，小尺寸边缘也更容易糊。
- 重复压缩：先压缩再转图标，会把边缘细节提前损坏。
清晰 favicon 的核心原则
| 原则 | 建议 | 原因 |
|---|---|---|
| 从大图开始 | 最好使用 512px 或 1024px 的源图 | 向下缩小比向上放大更清晰 |
| 保持图形简单 | 减少小字、细线和复杂阴影 | 16px 场景没有足够像素展示复杂细节 |
| 输出多尺寸 | 至少包含 16、32、48、64、128、256px | 浏览器和系统可以选择最合适的资源 |
| 保留透明背景 | 优先使用 PNG、SVG 或透明 WebP 源图 | 缩小后边缘更干净 |
| 制作前预览 | 同时看浏览器标签页和收藏夹效果 | 小尺寸问题必须在真实场景里检查 |
技术上，清晰 favicon 是怎么生成的？
一个高质量 favicon 不是简单地把图片改名成 favicon.ico。更稳妥的做法是：先把源图解码到浏览器 Canvas，再按多个目标尺寸重新绘制，最后打包成 ICO 或导出多尺寸 PNG。
- 高质量缩放：Canvas 绘制时开启 imageSmoothingEnabled 和 high 级别的 imageSmoothingQuality，让向下缩小时边缘更平滑。
- 居中裁切：把原图按正方形图标容器适配，允许用户拖动位置和缩放，避免主体被裁掉。
- 圆角裁剪：先绘制圆角路径，再 clip 到图标画布，适合 App 图标和品牌图标。
- 透明通道：使用 PNG 数据保留 Alpha，让图标边缘在深色和浅色浏览器主题下都更自然。
- 多尺寸打包：ICO 容器会写入 ICONDIR 文件头和多个图标条目，浏览器可以按显示场景选择 16px、32px 或更大尺寸。
- 256px 资源处理：常见 ICO 会把 256px 图标以 PNG 数据写入容器，较小尺寸可以使用 32 位 BGRA 位图数据。
如何在 HTML 中使用 favicon？
常见网站可以同时提供 ICO 和 PNG 图标。ICO 兼容性强，PNG 则适合现代浏览器、Apple Touch Icon 和 PWA 场景。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">用 toolgarden.xyz 制作清晰 favicon
ToolGarden 的图片转 Icon 工具会在浏览器本地读取图片，不上传文件。它会把源图渲染成多种标准图标尺寸，并生成 ICO、ICNS 或多尺寸 PNG ZIP。制作 favicon 时，推荐选择 ICO，因为 ICO 容器可以同时包含 16 到 256 像素的多套图标资源。
制作清晰 favicon 的步骤
- 准备一张尽量清晰的源图，建议 512px 或更大。
- 如果背景复杂，先移除背景或换成透明底。
- 在图标编辑区调整缩放和位置，让主体在小尺寸里仍然可识别。
- 生成 ICO，并同时保存多尺寸 ZIP 作为备用资源。
- 把 favicon.ico 放到站点根目录，并在 HTML 或框架 metadata 中引用。
- 刷新浏览器缓存后，在标签页、收藏夹和移动端快捷方式里检查效果。
总结
favicon 模糊的根本原因通常是像素不够、尺寸不全或缩放方式不合适。想让网站图标清晰，应该从高分辨率源图开始，简化图形，保留透明边缘，并输出多尺寸图标资源。
好的 favicon 不是只在 256px 预览里好看，而是在 16px 的浏览器标签页里也能被一眼认出来。