浏览器标签页上那个小小的图标，就是 favicon。它不起眼，却直接影响网站的辨识度——用户同时开十几个标签页时，靠的就是这一小块图案找到你的页面。很多站点上线后图标一直是默认的地球或者空白，多半不是没做，而是做了却没被浏览器正确读到。
浏览器是怎么找到图标的
最省事的做法是把图标文件命名为 favicon.ico 直接放在网站根目录，浏览器访问任意页面时都会默认去请求这个路径，不需要在 HTML 里写任何代码。如果图标放在别的目录或用了其他格式，就必须在页面 head 里用 link 标签显式声明，否则浏览器根本不知道去哪儿找。
该做多大尺寸
一个图标要应付的场景比想象中多：浏览器标签页通常显示 16×16，书签栏和地址栏用 32×32，Windows 桌面快捷方式能用到 48×48 甚至更大，手机加到主屏幕时则需要 180×180 的高清版本。同一张图缩放到不同尺寸时，小尺寸下细节会糊成一团，理想做法是每个尺寸单独出图并做简化处理。
ICO、PNG 还是 SVG
ICO 是老牌格式，最大的优势是可以在一个文件里打包多个尺寸，浏览器按需要自动取用，兼容性也最好，缺点是文件偏大且不支持透明渐变。PNG 体积小、支持透明，但要准备多个文件分别声明。SVG 能无损缩放、体积极小，现代浏览器都支持，不过 Safari 的兼容情况仍需留意。实际做法是优先用 ICO 打包多尺寸，配合 PNG 覆盖移动端。制作多尺寸图标可以交给ICO图标制作，一次导出各档尺寸，省得逐个手动切图。
改了却不生效的排查
最常见的原因是浏览器缓存：favicon 被单独缓存且时效很长，改了文件刷新也不变。解决办法是给文件加版本号，比如 favicon.ico?v=2，或者在隐私窗口里测试。其次是路径问题，根目录放对了但页面里 link 标签指向错误，两者冲突时以 link 标签为准。还有一种情况是文件本身损坏，可以用浏览器直接访问图标地址，看能否正常显示。
临时方案与收尾
如果暂时不想准备图片文件，可以把一张小图转成 Base64 直接内嵌进 HTML 的 link 标签里，用图片转Base64工具生成一段字符串即可，不需要额外请求、也不存在路径问题，适合图标很小且长期不变的情况。正式上线还是建议用独立文件，便于缓存和复用。图标做好后在几个主流浏览器里各看一眼，确认标签页、书签栏、手机主屏三种场景都正常，这件事就算彻底收工了。