Favicon 是浏览器标签页、收藏夹和手机桌面上代表你网站的小图标。它不需要你手动抠图、调尺寸和转格式，用 Favicon 生成器上传一张图，就能自动得到多种尺寸和格式的图标文件，放到网站根目录并在页面中声明即可生效。想让品牌在用户还没点进页面时就被认出来，这一关值得花十分钟做利索。
为什么 Favicon 值得单独处理
用户同时打开多个标签页时，文字标题往往被压缩得难以分辨，能一眼区分网站的就是那个小图标。Favicon 是品牌和用户之间的第一道视觉关卡：模糊、拉伸变形、与品牌无关的图标，会让人对网站可靠性产生怀疑；清晰、简洁、与主视觉一致的图标，则能在用户下次看到时唤起记忆。
很多人愿意在 Logo 和整体视觉上投入，却把 Favicon 随便丢一张图上去，甚至完全不设置，浏览器只能显示默认的空白页图标。这就像穿了一身定制西装却趿拉着拖鞋，细节全垮了。
Favicon 生成器能做什么
Favicon 生成器的核心价值是把「一张原图」自动切分成浏览器和操作系统需要的各种规格，免去逐个尺寸导出的过程。常见输出包括：
- 16×16、32×32 等浏览器标签页常用尺寸
- 180×180 这类触屏设备添加到主屏幕时使用的图标
- 多尺寸合并的图标文件，供不同环境按需取用
你只需要准备一张清晰的原图，上传后由工具完成缩放和格式转换，再下载整套文件。
操作步骤
第一步：准备一张合适的原图
选择与品牌主视觉一致的图形，优先使用简洁、轮廓明确的标志，而不是信息量很大的复杂插画。原图建议是正方形，分辨率足够大，这样缩到小尺寸时不会因为像素不足而发虚。如果原图不是正方形，生成器通常会裁切或留白，效果可能不理想，最好先自己处理成正方形。
第二步：上传并选择输出规格
把原图上传到 Favicon 生成器，按需要勾选输出尺寸和格式。如果你不确定要哪些，选择工具提供的整套默认规格即可，它一般会覆盖浏览器标签页和触屏设备主屏幕两类场景。
第三步：检查小尺寸下的效果
生成结果里重点看最小尺寸的那一版。很多图形在大图里好看，缩到十几像素就糊成一团。如果发现细节丢失，回到原图做简化：去掉细线条、减少颜色层次、加大主体占比，再重新生成。
第四步：放到网站根目录
把生成的文件放到网站根目录。根目录是网站域名对应的最顶层位置，浏览器会按约定路径去那里查找图标文件。放错目录是图标不显示的最常见原因之一。
第五步：在页面中声明图标
在页面的头部区域加入指向图标文件的声明，让浏览器知道去哪里取。不同尺寸和用途可以分别声明，浏览器会自行选择合适的那一个。声明完成后，清除浏览器缓存再刷新页面查看效果，否则可能仍然看到旧图标。
常见错误与排查
- 图标不显示：先确认文件确实在根目录，再确认页面里的声明路径与实际文件名一致。
- 图标模糊或变形：原图分辨率不足，或者不是正方形被强行拉伸。换一张更大的正方形原图重新生成。
- 只在一个浏览器里正常：不同浏览器对格式和尺寸的支持有差异，尽量输出覆盖主流规格的整套文件，而不是只放一个尺寸。
- 改了图标但看不到变化：浏览器和系统会缓存图标，清缓存或换一个未访问过的浏览器验证。
- 小尺寸下辨识度差：图形过于复杂。Favicon 的设计逻辑和 Logo 不完全相同，越简单越容易在小尺寸下被认出。
适用与不适用的情况
Favicon 生成器适合需要快速产出整套图标、又不想逐个尺寸手动导出的场景，尤其是个人网站、产品页和中小型项目。它的局限在于：生成器只负责尺寸和格式的转换，不负责设计。如果原图本身在小尺寸下辨识度差，任何工具都救不回来，这时需要先简化图形再生成。另外，如果你的品牌图形有严格的规范要求，生成后的每一版仍应人工确认，而不是直接全量上线。
常见问题
Favicon 必须放在网站根目录吗？
按约定路径放置最省事，浏览器会自动查找。你也可以在页面中显式声明文件位置，但根目录放置能覆盖更多默认查找场景。
原图多大合适？
关键是足够大且为正方形，这样缩放到各个小尺寸时都有足够像素可用。分辨率太低的原图放大或缩小都会失真。
为什么我设置了图标，标签页上还是空白？
常见原因是文件不在根目录、声明路径写错，或者浏览器缓存了旧状态。逐项排查后清缓存再试。
可以用照片当 Favicon 吗？
技术上可以，但照片细节多，缩到十几像素后通常只剩一团色块，辨识度很低。更推荐用简洁的图形或字母标记。
换了新图标，多久能生效？
取决于浏览器和系统的缓存策略，没有统一时间。清缓存或换浏览器可以立即验证新图标是否正确。