favicon.ico 是什么?如何制作并添加到网站?

favicon.ico 是浏览器在标签页、地址栏和书签列表中显示的小图标，本质是一个 ICO 格式的图片文件。制作方式有两种：用 favicon.cc 这类在线生成器绘制或导入图片，或直接用图像工具导出 ICO；做好后把文件放到网站目录，并在 HTML 的 <head> 里用 <link> 标签引用即可。如果你只是想让网站有个自定义图标，用在线生成器最快；如果已有设计稿，直接转换格式更省事。

favicon.ico 是什么

favicon 是 "favorites icon" 的缩写，浏览器用它来标识一个网站。它出现在几个位置：

浏览器标签页左侧
地址栏（部分浏览器）
书签/收藏夹列表
部分浏览器的历史记录和搜索结果

文件扩展名是 .ico，这是 Windows 图标格式，可以在一个文件里包含多个尺寸（如 16×16、32×32、48×48），浏览器会根据显示位置自动选用合适的那一档。

用 favicon.cc 制作图标

favicon.cc 是一个在线 favicon 生成器，打开后可以直接在网页上画图，也可以导入现成图片。根据页面提供的信息，它的主要功能包括：

绘制与编辑

Color Picker（取色器）：选择颜色后在网格上点击方块作画，页面提供透明度选项和最近使用颜色
Import Image（导入图片）：把已有图片转成 favicon
Create New Favicon（新建图标）：从空白画布开始

动画支持

favicon.cc 支持多帧动画 favicon，页面上的相关控件包括：

Frame（帧）：可添加、复制、删除帧，并在帧之间前后切换
动画设置：可设置循环播放（loop forever）、停在最后一帧（stop at last frame），或指定播放次数（2 到 20 iterations）
开关：可以选择 Don't Use Animation（不使用动画）或 Use Animation（使用动画）

动画 favicon 在部分浏览器中可能不显示或只显示第一帧，实际效果取决于浏览器支持情况。

下载与发布

画完后页面提供：

Preview Favicon in original size：按原始尺寸预览
Download Favicon：下载 favicon.ico 文件
Publish under an open license：可选地以 CC（Creative Commons）许可发布到站点的公共图标库

把 favicon 添加到网站

第一步：放置文件

把下载的 favicon.ico 上传到网站的根目录，也就是 https://你的域名/favicon.ico 能直接访问的位置。这是浏览器的默认查找路径，即使不写 <link> 标签，很多浏览器也会自动去根目录找。

第二步：在 HTML 中引用

在页面 <head> 里加上：

<link rel="icon" href="/favicon.ico" type="image/x-icon">

如果文件不在根目录，把 href 改成实际路径。用绝对路径（以 / 开头）比相对路径更稳妥，能避免子目录页面找不到图标。

第三步：验证

直接在浏览器打开 https://你的域名/favicon.ico，能显示图片说明文件位置正确
刷新网站页面，看标签页是否出现图标
用浏览器开发者工具的 Network 面板，筛选 favicon，确认请求返回 200

常见问题排查

图标不更新：浏览器会缓存 favicon，且缓存时间往往很长。可以强制刷新（Ctrl+F5 / Cmd+Shift+R），或换个浏览器、开无痕窗口验证。确认是缓存问题后，也可以给引用加版本参数，如 href="/favicon.ico?v=2"。

路径错误：最常见的原因是文件没放在根目录，或 href 写成了相对路径导致子页面失效。用浏览器直接访问图标 URL 是最快的验证方法。

格式或尺寸问题：浏览器对 favicon 的接受度较高，但 ICO 是最通用的格式。如果用了 PNG 等格式，需在 <link> 的 type 属性里写对 MIME 类型（如 image/png）。尺寸建议至少包含 16×16 和 32×32。

动画不显示：动画 favicon 并非所有浏览器都支持，部分浏览器只渲染第一帧。如果动画效果对你不重要，用静态图标兼容性更好。

发布到公共库的许可：favicon.cc 提供以 CC 许可发布的选项，这意味着其他人可能复用你的图标。如果图标包含你的品牌标识，发布前要确认许可条款是否符合你的预期。