Favicon 详解：格式、尺寸与制作方法
Favicon 是那个会出现在浏览器标签页、书签列表、已保存快捷方式、阅读列表以及其他需要用小型视觉标记来代表网站的位置上的小图标。它是一个网页项目里最小的资源之一，但承担的作用比很多人想象得更多。它帮助用户快速识别你的网站，让你的标签页在一排相似页面中更容易分辨，也让品牌看起来更完整。
这就是为什么几乎每个网站都应该有 favicon。缺少 favicon 不会让页面坏掉，但会让网站显得没做完。好的 favicon 会带来识别度，而不需要刻意争夺注意力。差的 favicon 则会糊成一团、在小尺寸下显得普通，或者在浏览器切换主题时几乎完全消失。
什么是 favicon，以及哪些尺寸最重要
最初的 favicon 概念很简单：一个用于浏览器书签和标签页的 16x16 像素图标。这个基线现在仍然重要，因为 16x16 正是可读性被真正检验的地方。如果图标在那里失败，通常在其他地方也不会好到哪里去。
现代 favicon 设置通常会包含不止一个尺寸。一个实用的组合通常会覆盖小型浏览器 favicon、一个用于通用备用的大一点 PNG，以及一个用于移动设备主屏幕的 touch icon。如果你想保持配置精简，可以把重点放在浏览器场景下的 16x16 和 32x32，把 48x48 作为更大的实用 raster 备用，把 180x180 用于 Apple touch icons。有些团队还会加入 192x192 来覆盖 Android 风格的 app 场景。
重点并不是收集所有可能的尺寸，而是确保图形在小尺寸下依然成立，并且导出的文件覆盖用户真正会看到它的地方。如果你需要一个起点，适合拿来做 favicon 的免费图标会更容易改造，前提是它的基础造型已经足够简单且容易识别。
SVG、ICO 和 PNG 各有职责
格式问题之所以重要，是因为浏览器支持情况和渲染行为并不完全一样。如今，SVG 是现代浏览器里最灵活的选择，因为它缩放干净、在高密度显示屏上仍然锐利，谨慎使用时甚至还能对浅色和深色主题做出响应。这让 SVG 对那些想要一个主文件和更简洁工作流的网站很有吸引力。
ICO 仍然重要，因为它依旧是旧式浏览器行为和默认 favicon 查找方式里最熟悉的备用方案。实际中，很多网站并不会在 SVG 和 ICO 之间二选一，而是两者一起用。最常见的渐进式做法是先提供一个 .ico 文件作为广泛备用，再为支持它的浏览器加上一条明确的 SVG favicon 链接。
PNG 则处在中间位置，作为可靠的 raster 导出格式存在。它适合用于 touch icons、更大的备用资源，以及任何你想要一个渲染表现可预测的简单位图文件的场景。如果你要把 PNG 转成 favicon，关键是从你手头最大、最干净的源文件开始，在导出前先简化图形，并有意识地生成小尺寸。原始 raster 文件里没有的细节不可能被后补出来，所以真正的质量工作发生在导出之前，而不是之后。
如何用简单 HTML 添加 favicon
如果你只想要一个基础设置，只用 HTML 就够了。传统做法可以简单到只是在根目录链接一个 favicon，例如 <link rel="icon" href="/favicon.ico" type="image/x-icon">。
如果想要更符合当下的设置，很多团队会同时提供 ICO 备用和 SVG 文件。常见组合是 <link rel="icon" href="/favicon.ico" sizes="any"> 再加上 <link rel="icon" href="/favicon.svg" type="image/svg+xml">。
如果你还想为 Apple 设备提供主屏幕图标，请单独添加 touch icon。这也回答了一个常见的混淆点：浏览器标签页图标和移动设备主屏幕图标彼此相关，但并不是完全相同的资源目标。你往往确实需要单独的 touch icon，因为主屏幕版本更大、更像 app 图标，而且出现在不同的使用环境里。
这也是格式选择开始变得实际的地方。SVG 往往是现代浏览器最好的主源文件。ICO 仍然对兼容性有价值。PNG 适合 touch icons 和 raster 备用资源。少量清晰的文件组合，几乎总比一大堆臃肿导出更好。
设计一个在 16x16 下仍然可用的 favicon
很多 logo 就是在这里失败的。一个在 hero section 里看起来精致的标志，缩到 16 像素时可能会直接塌成噪点。专业设计师通常会在导出前进行强力简化。他们会去掉细小细节、收紧轮廓、提高对比度，并在浅色和深色标签页背景上都测试图标。
好的 favicon 依赖几个强而明确的选择：一个可识别的形状、尽量少的内部细节，以及足够的留白，避免图标最后只剩一块深色方块。Flat icons 往往特别适合，因为它们较少依赖细小阴影或层叠的纵深效果。如果你想要更容易简化的视觉起点，适合作为 favicon 的 flat icons会比复杂插画更适合开始。
工具在这里也有帮助。设计师通常会从 Figma、Illustrator 或其他矢量工具中的 logo 或图标开始，导出 SVG，进行优化，然后再从这个源头生成 PNG 和 ICO 备用资源。专门的 favicon 生成器可以帮助打包文件，但工具并不能修复薄弱的图形本身。真正可读的版本必须先被设计出来。
现代网站的实用选择
如果你今天正在做一个网站，就用一个简单而现代的组合。保留一个干净的矢量源文件。为现代浏览器导出 SVG favicon。加入一个 ICO 备用以保证兼容。再加一个用于移动设备主屏幕的 touch icon。这样就能覆盖大多数真实需求，而不会把 favicon 设置变成一个维护项目。
动画 SVG favicon 在某些现代环境里在技术上是可行的，但它并不是默认建议。浏览器支持和行为并不一致，而 favicon 这种尺寸上的动态效果也很容易变得干扰。SVG 更好的用途通常是适应性，比如干净的缩放或浅色与深色主题变体，而不是持续不断的动画。
简短结论很直接。每个网站都需要 favicon，因为在拥挤的浏览器界面中，识别度很重要。今天通常最好的格式选择是 SVG 加 ICO 备用，在 raster 输出仍然合理的地方再用 PNG。最好的尺寸策略从 16x16 可读性开始，而不是把你能想到的每一种尺寸都导出一遍。如果图标在最小尺寸下依然清晰，并且在 head 中正确链接，其余设置就会容易得多。