如何用在线 favicon 编辑器制作 favicon.ico 并放到网站上

想快速做出一个 favicon.ico，可以直接用 favicon.cc 这类在线编辑器：在像素网格上画图或导入图片，调好颜色后下载 favicon.ico，再把它放进网站目录并在页面 <head> 中引用。它适合不想装设计软件、只需要一个小尺寸图标（浏览器地址栏、标签页显示）的场景；如果你要的是高分辨率品牌图标或多尺寸自适应图标，像素编辑器会不够用。

开始之前需要知道什么

favicon 是显示在浏览器标签页、地址栏和书签里的那个小图标，文件名通常是 favicon.ico。它的显示尺寸很小，所以设计时要按“像素级”来考虑，而不是按大图缩小的思路。

favicon.cc 的编辑器提供这些能力：

像素网格绘制：点击方格上色，用取色器选颜色，支持透明色。
导入图片：把已有图片作为底稿，再逐像素修改。
多帧动画：可以添加多帧、复制上一帧、删除帧，并设置循环方式。
下载与发布：完成后下载 favicon.ico，也可以选择以 Creative Commons（CC）开放许可发布。

编辑器里还有“Last Used Colors”（最近使用颜色）方便复用，以及“Preview Favicon in original size”按原始尺寸预览效果。

用像素网格画一个 favicon

打开 favicon.cc，选择 Create New Favicon 进入空白画布。
在 Color Picker 里选颜色。需要镂空或让背景透出时选 Transparency（透明）。
点击网格中的方格上色，逐格画出你的图形。画错了可以用透明色覆盖，或重新选色覆盖。
用 Preview Favicon in original size 看实际大小下的效果——这一步很关键，因为编辑器里放大显示时好看，不代表缩小后还清楚。
满意后点 Download Favicon 下载 favicon.ico。

预期结果：得到一个 favicon.ico 文件，可以放到网站上使用。

常见卡点：图形细节太多，缩小后糊成一团。favicon 的可用像素很少，建议用简单轮廓、高对比配色，避免细线和密集文字。

导入已有图片再修改

如果你已经有 logo 或图案，不必从零画：

选择 Import Image，上传你的图片作为底稿。
底稿会显示在网格上，用取色器和点击逐格修正边缘、去掉多余像素。
同样用原始尺寸预览确认清晰度，再下载。

适用条件：原图最好是简单、对比强的图形。照片类图片导入后通常无法在 favicon 尺寸下辨认，需要大幅简化。

制作多帧动画 favicon

favicon.cc 支持动画图标，操作方式是按帧编辑：

Append New Frame 添加新帧，Copy Previous Frame 复制上一帧再改，Delete Frame 删除当前帧。
用 Previous / Next 在帧之间切换，Clear Frame 清空当前帧。
动画播放方式可选 animate preview、loop forever（无限循环）、stop at last frame（停在最后一帧），以及 2 到 20 次不等的迭代次数。
不想用动画时选 Don't Use Animation。

注意：动画 favicon 并非所有浏览器和场景都支持，标签页里可能只显示静态帧或第一帧。如果只是要一个稳定的站点图标，静态单帧更稳妥。

把 favicon.ico 放到网站上

下载后按以下步骤接入：

把 favicon.ico 上传到网站的根目录（即域名对应的最上层目录，例如 https://example.com/favicon.ico 能直接访问到）。
在页面 <head> 中添加引用：

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

如果文件不在根目录，把 href 改成实际路径，例如 /assets/favicon.ico。

保存后刷新页面，查看浏览器标签页是否出现图标。

预期结果：浏览器标签页和地址栏显示你的图标。

图标不显示或没更新怎么办

路径不对：直接在浏览器地址栏访问 你的域名/favicon.ico，如果打不开，说明文件位置或文件名有问题。
缓存未更新：浏览器会缓存 favicon，换图后可能还显示旧图标。可以强制刷新（Ctrl+F5 / Cmd+Shift+R），或换一个无痕窗口查看。
引用缺失：确认 <head> 里的 <link rel="icon"> 写对了，路径区分大小写。
格式问题：确认下载的是 .ico 文件，且文件名与引用一致。

什么时候适合用 favicon.cc

适合：想快速手绘一个简单图标、需要导入图片微调、想尝试动画 favicon、不想安装软件。

不太适合：需要多尺寸自适应图标（如同时适配手机主屏）、需要矢量源文件、需要精细的品牌级设计。这些情况用专业设计工具导出多尺寸图标更合适。

另外，favicon.cc 提供 Publish under an open license 选项，可以把作品以 Creative Commons 许可发布；如果你不希望图标被他人按开放许可使用，就不要勾选发布。