网站图标
Favicon
初级网页网站图标（Favicon）是浏览器用来标识网站的小图像，常出现在标签页和书签中。它帮你在打开多个网页时快速认出站点；比如工作台标签页旁的小图案。
你可能会说：「我想让用户打开我们的网站时，浏览器标签页上显示自己的小图案，而不是默认图标。」
动手看看多标签中的工作台图标
切换网站图标，看中间标签页和书签栏如何一起变化；也可以悬停或用 Tab 聚焦这些入口。这里模拟浏览器外观，不会真的跳转。
标题告诉你当前是哪一页，旁边的小图标告诉你属于哪个网站。打开很多标签页时，先认图案通常比逐字读标题更快。
图标在这里仅有 16 像素大小，简单的字母和清晰轮廓更容易辨认。演示用 CSS 模拟图案，实际网站通常提供图标文件，更新还可能受浏览器缓存影响。
要点网站图标是怎么出现在浏览器里的？
- 1
它标识网站而非页面内容
你打开多个标签页时，浏览器可能会在页面标题旁显示网站图标。它占的空间很小，所以图案要在缩小后仍能辨认；复杂的品牌插画通常不适合直接拿来用。
- 2
图像文件需要被网站引用
只把图片放进项目文件夹，浏览器不一定知道该用哪张。我们通常让网页明确引用图标文件，并确认上线后能访问到它。这样浏览器打开页面时才有机会取到正确图像。
- 3
更换后可能不会立刻刷新
如果你已经换了图标，却还看见旧图，先别急着判断代码没生效。浏览器可能保留了先前的文件；我们可以检查线上文件和页面引用，再用无痕窗口等方式排查缓存。
容易混淆的地方
网站图标和标志可能使用相近的图形，但用途不同：标志可以放在网页页头，网站图标则供浏览器在标签页、书签等位置识别站点。它也不是手机桌面上的应用图标；如果你要处理用户把网页添加到主屏幕后的外观，还需要考虑 Web 应用清单等配置。
什么时候用
适合用
- 给新上线的产品官网配图标，让用户在一排浏览器标签页里认出你的站点。
- 为团队常用的管理后台设置图标，方便同事在多个工作页面之间切换。
- 产品更换品牌视觉时，同步更新网站图标，并检查上线后浏览器能否取到新文件。
不适合用
- 只是想在网页顶部展示品牌图形时，用页面里的标志图片，而不是靠网站图标呈现。
- 要设计原生手机 App 在桌面上的图标时，处理应用图标；网站图标不负责这个位置。
- 想控制链接分享到聊天软件时显示的大图和摘要，应配置分享相关的页面元数据。
练一练选一个答案，看看解释
你给一个在线文档工具换了品牌图形。网页页头已显示新标志，但浏览器标签页仍是旧图。下一步更贴合问题的是？
让 AI 帮你做复制给 AI Agent 直接用
请为这个网站配置网站图标（Favicon）：沿用现有品牌图形，做成缩小后仍清晰的版本，放到项目合适的位置并让网页引用它。完成后检查文件路径是否可访问，并告诉我如何排查浏览器仍显示旧图的情况。