技术

什么是 favicon,为什么你的网站需要它?

浏览器标签页里的这个小图标常常是访客注意到的第一件事——也是暴露网站尚未完工的第一个信号。

这是什么

favicon(「favorite icon」的缩写)是显示在浏览器标签页页面标题旁边、书签列表中,有时还会出现在浏览历史和搜索建议里的小方形图片。它通常是徽标的简化版本——小到只有几个像素大小依然能辨认出来,比如一个字母、一个简单的形状,或一个图标。

如果没有它,浏览器会在那个位置显示一个通用的空白页图标——任何未设置 favicon 的网站都会用这个占位图,这会让人立刻看出这个细节从未被配置过。

为什么重要

缺失 favicon 是件小事,但也是最显眼的小事之一:它出现在你网站的每一个页面上、每个浏览器标签页里、面向每一位访客,而且始终如此。当有人打开了好几个标签页时,favicon 往往是他们从一排标签中找回你那个标签的唯一视觉方式——通用的空白图标让这件事变得更难,也悄悄传递出「这个网站从未真正完工」的信号。

这也是整个清单里最快能拿到成效的事情之一:与内容或设计决策不同,favicon 只需几分钟就能创建并添加,一旦到位就无需持续维护。

如何解决

  1. 创建一个简单的方形图片(最好是你徽标的简化版本)——免费的 favicon 生成工具可以自动把现有的徽标图片转换成合适的文件格式和尺寸。
  2. 将结果保存为 favicon.icofavicon.svg,并上传到你网站的根目录(或你的托管平台要求存放图标文件的位置)。
  3. 在页面的 <head> 部分添加 <link rel="icon" href="/favicon.ico">(或对应的 SVG 版本)。
  4. 如果你使用的是网站建设工具(Squarespace、Wix、Webflow、WordPress),在通用网站设置中寻找「favicon」或「网站图标」上传字段,而不是直接编辑代码。
  5. 在一个全新的浏览器标签页中重新加载页面(或清除浏览器缓存),确认新图标已经出现——favicon 有时会被缓存,更新较慢。

看看你自己的网站是否也有这个问题

Launch Readiness 会在几秒内检测你的网站是否存在此问题以及其他约 50 个上线前的问题——免费,无需注册。

立即免费检测