如何用 favicon.cc 在线编辑器制作 favicon.ico 并放到网站上
打开 favicon.cc，你可以直接在浏览器里新建一个画布，用色板逐格画出图标，或导入现成图片转成 favicon，完成后下载 favicon.ico 放到网站目录即可。整个过程不需要安装软件，适合想快速给网站加一个地址栏小图标的人。需要注意：favicon.cc 提供的是制作和下载工具，图标最终能否显示取决于你把文件放到了哪里、页面有没有正确引用，以及浏览器缓存是否已刷新。
在 favicon.cc 上新建并绘制图标
favicon.cc 的编辑区是一个像素网格，配合 Color Picker（取色器）使用。页面上的操作提示写得很直白：Choose a color（选颜色）→ Click on the squares and paint your logo（点击方格绘制你的图标）→ Download when you are finished（完成后下载）。
具体步骤：
- 进入 favicon.cc，选择 Create New Favicon 新建一个空白画布。
- 在 Color Picker 里选一个颜色，输入框显示的是十六进制色值（例如页面示例中的
0084FF）。 - 用鼠标在网格上逐格点击上色，画出你的图案。画错了可以用 Clear 清空重来，或调整 Transparency（透明度） 处理边缘。
- 想省事的话，用 Import Image 导入一张现成图片，让工具把它转成图标，再手动微调。
- 完成后点击 Download Favicon 下载 favicon.ico 文件。
绘制时的一个实用判断：favicon 在浏览器标签页和地址栏里通常只显示十几到几十像素，细节越多越糊。优先用简单形状、高对比配色，字母和几何图形比复杂插画更容易辨认。
用帧和动画做动态 favicon
favicon.cc 支持多帧编辑，可以把图标做成会动的效果。编辑区下方有帧控制：
- Append New Frame：新增一帧
- Copy Previous Frame：复制上一帧，适合做小幅变化
- Delete Frame：删除当前帧
- Previous / Next：在帧之间切换
- Frame 1 of 1：显示当前帧位置
动画设置里可以选 animate preview（动画预览）、loop forever（无限循环）、stop at last frame（停在最后一帧），以及 2 到 20 次之间的循环次数；也可以直接选 Don't Use Animation 做静态图标。每帧还能单独设置显示时长，从 0.05 秒到 20 秒不等。
做完后先点预览确认循环或定格效果符合预期，再下载。动态 favicon 不是所有浏览器和场景都支持，如果只是想让标签页有个稳定标识，静态图标更稳妥。
把 favicon.ico 放到网站上
下载得到 favicon.ico 后，按 favicon.cc 的说明，把它放进你的网站服务器目录。常见做法是放在网站根目录，这样浏览器访问时会自动去请求 /favicon.ico。
如果放在根目录，通常不需要额外配置；如果放在子目录或用了别的文件名，就要在页面 <head> 里显式引用：
<link rel="icon" href="/favicon.ico" type="image/x-icon">
把 href 换成你的实际路径即可。放好之后重新打开网站，查看浏览器标签页和地址栏是否出现图标。
可选：以 Creative Commons 许可发布
favicon.cc 提供 Publish under an open license 选项，可以把你做的图标以 CC（Creative Commons）许可公开发布。页面底部还有 Latest Favicons、Top Rated Favicons 等公开图标库，以及 Tag Cloud 标签分类（如 flower、letter、logo、love、star、animated 等）。
要不要发布取决于你的用途：如果图标要作为品牌标识独占使用，通常不选公开发布；如果只是随手做的通用小图标，愿意让他人复用，再考虑 CC 许可。发布意味着他人可以在该许可范围内使用，这一点在点击前想清楚。
图标不显示时怎么排查
按顺序检查这几项：
- 文件名和路径：确认文件确实叫
favicon.ico，且放在你引用的位置。路径写错是最常见的原因。 - 引用标签：如果没放在根目录，检查
<head>里的<link rel="icon">是否写对。 - 浏览器缓存：favicon 缓存很顽固，换浏览器或无痕窗口测试，或强制刷新（Ctrl+F5 / Cmd+Shift+R）。
- 格式问题：确认下载的是 .ico 文件，而不是被改名的 png。
- 浏览器支持：动态 favicon 在部分浏览器不生效，换成静态版本再试。
favicon.cc 页面本身也提示了完整流程：选色 → 绘制 → 下载 → 放入网站目录 → 可选发布。照着这条链路走，多数问题都能定位到具体一步。