七种实际使用场景
Favicon 预览：浏览器、搜索与主屏幕
先看清最小尺寸，再让访客看到它。
上传一张 Favicon，同时检查它在浏览器标签、搜索结果、书签、桌面快捷方式和手机主屏幕中的辨识度、对比度与裁切效果。站点名和域名可以编辑，便于按真实品牌判断。
场景校样板
这些模拟用于比较尺寸、对比度和常见裁切形状。浏览器、Google 与操作系统界面会变化，因此应把它们作为设计检查，而不是像素级截图。
浏览器标签
Chrome 风格标签
Safari 风格标签
搜索、书签与桌面
你的网站
https://example.com
你的网站 — 官方网站
用于检查 Favicon 放在站点名称和网址旁边时，是否仍然清楚易认。
Google 风格搜索结果
浏览器书签
你的网站
桌面快捷方式
手机主屏幕
你的网站
iPhone 主屏幕模拟
你的网站
Android 主屏幕模拟
检查常用尺寸
16 × 16 px
32 × 32 px
48 × 48 px
180 × 180 px
如何预览 Favicon
- 01
上传 Favicon
选择计划实际使用的 PNG、SVG 或 ICO。上传 ICO 时，工具会选取其中尺寸最大的图像用于预览。
- 02
填写站点信息
把示例文字换成品牌名称和主机名，再切换浅色、深色背景进行比较。
- 03
检查小尺寸与遮罩
先看 16px 标签页，再检查搜索、桌面和手机场景中是否丢失细节、对比不足或过于贴边。
不同场景能看出什么
同一张图片会以不同尺寸出现在不同界面形状中。场景校样板用于并排比较这些条件，但不会安装文件，也不会复刻所有浏览器版本和设备主题。
浏览器标签
检查最常见的小尺寸辨识度，以及页面标题被截断时的整体效果。
标签间距、背景与图标选择会随浏览器、操作系统和屏幕密度变化。
Google 搜索
检查图案放在站点名称与可见网址旁边时是否仍然有辨识度。
模拟结果不能保证 Google 一定抓取、选用或显示这张 Favicon。
书签与快捷方式
比较同一图案在紧凑书签和较大桌面图标中的效果。
访客设备可能使用其他声明文件或缓存中的旧版本。
手机主屏幕
发现图案是否太靠近圆角或其他形状的图标边界。
正式的 iOS、Android 图标取决于 apple-touch-icon 和 Web App Manifest 资源，不只取决于标签页 Favicon。
Favicon 设计检查清单
预览的价值在于帮助你做出具体设计调整。先处理最小场景，再向外扩展，并另外检查已经部署的网站。
让 16px 轮廓一眼可认
删除在浏览器标签中会消失的细线、小字和内部装饰，保留最有识别度的形状。
使用至少 48px 的正方形源图
Google 要求 Favicon 为正方形且至少 8×8，并建议使用至少 48×48 的较高分辨率图片，以适应不同界面。
检查浅色与深色背景
为透明图案提供足够对比或可控背景，避免它融入浏览器界面。
添加主屏幕专用图标
如果较大的手机预览很重要，应同时配置 Apple Touch Icon 和合适的 Web App Manifest 图标。
Favicon 预览常见问题
Favicon 预览工具有什么用？
它会把一张本地 Favicon 放进浏览器、搜索、书签、桌面和手机等代表性场景，帮助你在发布前判断尺寸、对比度与裁切效果。
这个工具会修改或上传我的 Favicon 吗？
不会。图片只在你的浏览器中读取并用于预览，不会被缩放后下载、发布或上传到服务器。
预览会与 Chrome、Safari 或 Google 完全一致吗？
不会。浏览器和平台界面会随版本、主题及设备变化。这里还原的是关键尺寸与周围环境，不承诺逐像素一致。
可以预览 favicon.ico 文件吗？
可以。工具会读取 ICO 目录，选择其中尺寸最大的图像用于预览，不会修改原始 ICO 文件。
为什么 Favicon 在 16×16 下很模糊？
细线、小字与复杂插画缩小到少量像素后会失去清晰度。可以简化轮廓、增加对比，并检查专门绘制的 16px 版本。
Favicon 预览与 Favicon 检测有什么区别？
Favicon 预览用于发布前检查本地图稿；Favicon 检测则检查公开网站已经部署的图片文件和 link 声明。