SaaS 落地页不需要一套复杂的 Favicon 文件。真正需要的是:在标签页尺寸下仍然清楚可辨的图形、稳定的资源地址,以及浏览器和抓取程序能够正确理解的声明。

Favicon 是产品细节和品牌系统的一部分,但没有可靠证据说明它本身就能直接提高转化率。更稳妥的做法是把它做好、在真实设备上检查,同时避免给它附加未经证实的商业效果。

一套实用的 Favicon 配置

HTML 标准使用 rel='icon' 声明页面图标,并允许可缩放资源(例如 SVG)使用 sizes='any'。ICO 可以作为兼容方案;如果用户可能把网站添加到 Apple 设备主屏幕,还可以提供可选的 Apple touch icon。

<link rel='icon' href='/favicon.svg' type='image/svg+xml' sizes='any'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

文件名和属性必须与实际上线的文件一致。HTML 标准解释了 icon 关系与 sizes 属性;Apple 的 Web Clip 文档说明了 touch icon 的设置方式。

按照最小显示尺寸来设计

使用符号,不要塞入完整文字 Logo

完整产品名在浏览器标签页中通常无法辨认。先提取 Logo 中最简单、最有辨识度的形状,再分别查看 16×16 和 32×32 像素的效果。如果轮廓已经糊成一团,应先删减细节,而不是只追求更高清的导出。

同时检查明暗界面

透明背景上的深色图形可能消失在深色标签栏中,过浅的图形也可能消失在浅色界面中。两种环境都要测试。如果同一素材无法保持对比度,可以考虑经过验证的 SVG 配色方案;具体方法见深色模式 Favicon 指南

保持资源地址稳定

在同一个 URL 下直接替换图标,可能让浏览器或抓取缓存继续显示旧图。确实更换设计时,可以使用明确的版本化 URL,并只更新一次声明,避免频繁变动。

Google 搜索结果有单独的资格要求

浏览器标签页显示正常,并不保证搜索结果一定采用同一个图标。Google 当前文档要求图标为正方形且至少 8×8 像素,建议大于 48×48 像素,并要求首页和图标文件都能被抓取;同时也明确说明,即使符合要求也不保证展示。

应以 Google 搜索 Favicon 官方文档为准,并保持图标 URL 稳定。不要把“建议大于 48×48”误写成“所有浏览器都强制要求 48×48”。

上线前检查清单

如果要先检查已有网站的图标文件,可以从下载 Favicon 指南开始。少量但彼此一致、经过验证的文件,比声明与实际资源互相矛盾的大礼包更可靠。