先确保图案在 16 像素下仍能辨认

源图应当为正方形，轮廓清楚、对比强烈，并减少细小细节。纤细文字和照片纹理在 512 像素时可能很好看，缩小到浏览器标签页后却会完全消失。应分别在明暗浏览器背景上检查最小版本。

主体四周应保留少量空间。图案贴满边缘后，如果平台增加遮罩、圆角或背景处理，视觉上会显得拥挤。

理解每种文件的用途

favicon.ico 仍然是实用的兼容文件，因为一个容器可以包含多个小尺寸位图。180 × 180 的 Apple Touch 图标用于 Apple 设备上的保存快捷方式，192 × 192 和 512 × 512 PNG 则常由 Web App Manifest 引用。

SVG Favicon 能在不同尺寸下保持清晰，但文件应简单、自包含，并在目标浏览器中测试。需要广泛兼容时，仍应保留传统 ICO 回退文件。

  • favicon.ico：包含适合标签页的小尺寸
  • apple-touch-icon.png：独立的正方形触摸图标
  • 192 与 512 PNG：常用于 Manifest
  • site.webmanifest：把可安装应用信息与图标文件关联起来

安装后逐个验证引用路径

把生成文件放在稳定的公开地址，并从页面 head 或 Manifest 正确引用。文件本身正确但路径写错，浏览器仍然无法使用，因此部署后应直接打开每一个最终 URL。

浏览器对 Favicon 的缓存可能很持久。测试替换版本时，可以使用全新浏览器配置，或先检查网络响应，再判断新图标是否没有部署成功。