Favicon 最佳实践

文字长度

一个字最好。图标经常以 16×16 到 32×32 显示，一两个字符最清楚。字一多就会糊、会挤。

字体选择

选小尺寸仍然能认的字体：

• 粗体： 比细体、细字重更清楚
• 无衬线： 小尺寸下一般更好认
• 避免装饰性或手写体，缩小后会看不清
• 先看实际大小： 定稿前用 16×16 预览

颜色对比

文字和背景对比要高。图标会出现在浅色、深色、彩色等各种浏览器背景上，都要能看清。接近的颜色在小尺寸下会糊成一团。

简单

保持简洁。复杂细节在小尺寸下会消失。抓住一个能代表品牌或站点的图形即可。

格式选择

需要哪些尺寸

提供多种尺寸，才能在各类设备和场景下显示正常：

• 16×16： 标准标签页尺寸
• 32×32： 高分屏和部分浏览器场景
• 180×180： iOS 主屏幕的 Apple Touch Icon
• 192×192 和 512×512： Android 主屏幕图标和 PWA

说明：始终在最大尺寸（512×512）上设计再缩小，不要从小图放大。这样各尺寸质量最好。

浏览器兼容

在 Chrome、Firefox、Safari、Edge 以及桌面、手机、平板上测试。各浏览器处理略有不同，全面测试才能外观一致。

直接用完整 Logo

除非 logo 极简，否则不要整张塞进去。多数 logo 在 16×16 下细节太多、认不出。改用简化版、字母标或品牌里的关键图形。

对比不够

元素对比低时，小尺寸会看不见。要保证在不同浏览器主题和背景下都清楚。

文件放错位置

文件通常放在 public 或 static，HTML link 的路径必须指对。

只提供一种尺寸

只给一种尺寸会限制兼容性。至少准备 16×16、32×32、180×180、192×192、512×512。

没实测

上线前在多种浏览器和设备上测。一个浏览器好看，另一个可能不对。用开发者工具确认图标有没有加载。