给公司站点换 favicon，从素材站下了一个 png，改后缀成 .ico 丢到根目录，浏览器标签页上还是空白。打开开发者工具，网络面板里 favicon.ico 返回 200，控制台也没报错，问题出在文件本身不是 ico 容器。

ico 不是图片格式，是打包格式

一个 ico 文件里可以塞多张不同尺寸的位图，16、32、48、256 各一份，系统按显示场景挑。把 png 改名得到的文件只有单一尺寸，浏览器解析头信息失败就静默忽略，所以看起来像没生效。

怎么做出合规的 ico

装了 ImageMagick 的话一条命令就行，把几个尺寸一次写进同一个文件：

convert logo.png -define icon:auto-resize=256,48,32,16 favicon.ico

没装工具就用在线转换，注意两点：上传前把原图裁成正方形，尺寸取 256 的整数倍；转换后下载的文件大小一般在 5 到 60KB，几百 KB 的多半是把 256 位图存成了无压缩。

页面里怎么引

根目录放一个 favicon.ico，浏览器会自动去找，这是最省事的做法。要指定别的路径或格式，在 head 里加 link 标签，rel 写 icon，type 写 image/x-icon。想同时支持高清屏，再加一条 rel 为 apple-touch-icon 的 180 像素 png。

  • 路径用绝对路径，子目录部署的站点尤其容易在这里翻车。
  • 换图后强刷缓存，Ctrl+F5 有时还不够，得清站点数据。
  • CDN 会缓存 ico 很久，改完记得刷新对应 URL。

素材来源的授权问题

直接抓别人站点的 favicon 属于侵权，哪怕只有 16 像素。图标库用 Font Awesome、Material Symbols 这类明确标注许可的，商用前看一遍协议原文，署名要求别漏。自己设计的 logo 缩到 16 像素常常糊成一团，先把细节砍掉再导出，小尺寸单独画一版更靠谱。

做完拿浏览器标签页、书签栏、桌面快捷方式三处各看一眼。三处都清楚，这套图标才算能用。