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”。
上线前检查清单
- 直接打开图标 URL,确认返回成功且内容确实是图片。
- 检查页面源代码,确认所有声明的文件都真实存在。
- 测试普通标签页、需要时测试保存到主屏幕,并检查明暗主题。
- 在小尺寸下判断辨识度,不要只看高清 Logo。
- 部署后给浏览器缓存和搜索抓取留出更新时间。
如果要先检查已有网站的图标文件,可以从下载 Favicon 指南开始。少量但彼此一致、经过验证的文件,比声明与实际资源互相矛盾的大礼包更可靠。