制作一个 favicon 只需要三步：准备一张方形图片，转成 ICO 文件，往 HTML 里加一行 <link> 标签。转换这一步用我们的图片转 ICO 工具在浏览器里就能完成——不用上传，不用注册。整个活儿五分钟左右。下面把每一步里真正要紧的细节讲清楚。
favicon 到底是什么
favicon 是绑定在网站上的小图标。它出现在浏览器标签页、书签列表、浏览历史里，有些浏览器还会把它放在网址旁边。在标签栏里它只有 16×16 像素，却往往是访客开了八个标签页之后唯一还能看到的品牌标识。
经典的 favicon 是一个 .ico 文件，而 ICO 有一个在此至关重要的特性：它是容器。单个 ICO 文件可以装下同一图像的多个分辨率——通常是 16×16、32×32 和 48×48——浏览器按场景自动挑选。标签栏取 16，Retina 屏取 32，Windows 快捷方式对话框取 48。容器格式的原理见我们的 ICO 格式深度解析。
这个惯例来自 1999 年的 Internet Explorer 5，它会自动向每个访问过的网站请求 /favicon.ico。文件名就这么留了下来。而图标的触达范围后来还在扩大：Google 在移动搜索结果旁边显示 favicon，这个 16 像素的小方块已经悄悄成了你搜索摘要的一部分，不只是标签页装饰。
第一步：准备源图
源图决定 favicon 是清晰锐利还是一坨污渍。三条规则：
裁成方形。 favicon 是方的。如果你的 logo 是横宽的，先裁切或补齐成方形画布，否则转换会把它压扁。
保持简单。 16×16 一共只有 256 个像素。细线条、渐变、小字都会化成噪点。一个粗重的图形，或一两个粗体字母能活下来；细节丰富的插画活不下来。测试方法：把图缩到缩略图大小——你在那个尺寸认不出它，浏览器标签页也认不出。
从大图做起。 至少从 512×512 开始。缩小能掩盖瑕疵，放大只会制造瑕疵。
源图的文件格式基本无所谓。图标带透明背景就用 PNG 或 WebP——JPG 存不了透明度，透明区域会被压到白底上。纯色底上的扁平 logo，用 JPG 也行。
第二步：把图片转成 ICO
把源文件拖进对应格式的转换器：PNG 转 ICO、JPG 转 ICO 或 WebP 转 ICO。工具在你的浏览器本地解码图片，把标准尺寸打进一个 ICO 容器，给你一个文件下载。没有任何上传，整个流程都在你的电脑上跑。
多尺寸容器正是该用 ICO 而不是把 PNG 改个名的原因。一张 512×512 的 PNG 直接当 favicon 用，会逼着浏览器现场缩小，而自动缩小对精细图形从不客气。ICO 里装的是手工调优过的小尺寸版本，浏览器只管挑。
ICO 里该装哪些尺寸、什么时候需要 ICO 之外的额外文件，是单独一个话题——我们的 favicon 尺寸指南 有完整表格，包括 iOS 主屏用的 apple-touch-icon 尺寸。
第三步：接入你的网站
把 favicon.ico 放到网站根目录，然后在页面的 <head> 里加一行：
<link rel="icon" href="/favicon.ico" sizes="any" />
sizes="any" 这个提示告诉浏览器文件里有多个分辨率，让它挑最合适的，而不是默认当成 16×16。
把文件放在 /favicon.ico 的意义不止于 link 标签。对于什么都没声明的网站，浏览器会自动请求这个路径；RSS 阅读器、爬虫预览之类的工具也会往这里找。根目录的 favicon 连忘了写标签的页面都能覆盖到。
现代浏览器也接受 PNG favicon，声明方式如下：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
PNG favicon 单文件更小、生成更容易，但兼容性的王座仍归 ICO：它在有史以来每个浏览器里都能用，它是 /favicon.ico 自动请求所期待的格式，而且一个文件覆盖所有尺寸。两个都发——根目录放 ICO 外加 PNG 声明——是大多数网站最终落地的双保险方案。
检查效果
强制刷新页面（favicon 缓存得非常顽固），然后看标签页、书签栏和历史列表。如果图标在标签页尺寸下发糊，问题几乎从来不在转换器——在源图。回到第一步，简化图形，重新转换。
你的 logo 文件现在多半正躺在某个文件夹里。把它拖进转换器，接上 link 标签——你的标签页就不再是那个空白的文档图标了。