如何 generate a favicon：个人网站图标添加指南

浏览器标签页上的小图标叫 favicon，它就是一个 16×16 或 32×32 像素的图片文件，放在网站根目录并在 HTML 里引用一下就能显示。你不需要会写代码，也不需要买任何服务：准备一张方形图片，用浏览器里的工具 generate a favicon，把生成的文件放进网站目录，再复制一行链接标签，整个过程十分钟以内就能完成。

favicon 是什么，为什么你的标签页还是空白

favicon 是 “favorite icon” 的缩写，最早出现在浏览器书签栏，现在它会显示在浏览器标签页、书签列表、历史记录，部分系统还会把它用在桌面快捷方式上。刚建好的个人网站没有这个文件，浏览器只能显示一个默认的空白页图标，看起来就像网站还没做完。

常见的误区是以为需要专门的设计软件。实际上 favicon 非常小，浏览器显示时通常只有 16 像素见方，所以图案越简单越好：一个字母、一个几何形状、或者你头像的局部，都比复杂的插画更清楚。你只需要一张正方形的源图片，剩下的交给生成工具。

另一个常见误区是以为必须上传图片到某个网站。现在很多工具直接在浏览器里处理图片，文件不会离开你的电脑，这对个人网站来说更省心。

第一步：准备一张合适的源图片

源图片的质量决定了最终图标清不清楚。开始之前，先确认这几点：

• 正方形：宽高相等，比如 512×512 或 1024×1024 像素。长方形图片会被拉伸或裁切。
• 格式常见：PNG 最稳妥，支持透明背景；JPG 也可以，但透明区域会变成白色。
• 图案简单：缩小到 16 像素后仍能辨认。避免细线条、小字和渐变细节。
• 背景有对比：浅色图标配深色背景，或反过来，保证在浅色和深色主题的浏览器里都看得清。

如果你只有一张长方形照片，可以先用系统自带的图片工具裁成正方形。不需要追求完美，favicon 本身就是个很小的元素，清晰可辨比精致更重要。

第二步：用工具 generate a favicon 并下载文件

准备好图片后，打开一个在线 favicon 生成器。以 FaviconForge 为例，它完全在浏览器里运行，不需要注册账号，也不会把你的图片上传到服务器。操作顺序通常是：

1. 把准备好的正方形图片拖进页面，或者点击选择文件。
2. 工具会自动生成多种尺寸，常见的是 16×16、32×32、48×48，以及用于手机主屏幕的 180×180 和 192×192。
3. 预览一下小尺寸效果，如果 16 像素下看不清，回到第一步简化图案。
4. 下载生成的压缩包，里面通常包含 favicon.ico 和几个 PNG 文件。

这里的关键是 generate a favicon 时不要只拿一个尺寸。老浏览器认 .ico 文件，现代浏览器和手机则更偏好 PNG 或 SVG。多尺寸一起提供，兼容性最好。

第三步：把图标文件放到网站根目录

下载完成后，你会得到一个压缩包。解压后把里面的文件上传到你网站的根目录，也就是首页 index.html 所在的那一层。常见的位置包括：

• 静态网站托管平台的文件管理面板；
• 通过 FTP 或 SFTP 连接服务器后上传；
• Git 仓库里与首页同级的位置，推送后自动部署。

如果你把文件放进 images 或 assets 子文件夹也没问题，只要后面 HTML 里的路径写对就行。但 favicon.ico 放在根目录有一个好处：即使你不写任何链接标签，部分浏览器也会自动去根目录找它。

第四步：在 HTML 中添加链接标签

文件放好后，打开首页的 HTML 文件，在 <head> 和 </head> 之间加入下面几行。路径要和你实际存放的位置一致：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

如果你用的是 WordPress、Hexo、Hugo 这类建站工具，通常有主题设置项可以直接填图标地址，不必手动改 HTML。找不到设置项时，再回到模板文件里添加链接标签。

想让安卓手机把网站添加到主屏幕时也有像样的图标，可以再加一个 site.webmanifest 文件，在里面声明 192×192 和 512×512 的 PNG 图标。这一步不是必须的，但加上之后体验更完整。

第五步：验证图标是否生效

上传并保存后，回到浏览器刷新页面。favicon 缓存比较顽固，如果还是空白，可以试试：

• 强制刷新：Windows 按 Ctrl + F5，Mac 按 Cmd + Shift + R；
• 直接访问图标地址，比如在域名后面加上 /favicon.ico，看能否打开图片；
• 换一个浏览器或无痕窗口打开，排除缓存干扰；
• 检查 HTML 里的路径大小写，服务器通常区分大小写。

如果直接访问图标地址返回 404，说明文件没放对位置或文件名拼错了，回到第三步检查目录结构即可。

常见问题与排查清单

图标显示模糊或变形

多半是源图片不是正方形，或者图案太复杂。换一张更简单的正方形图片重新 generate a favicon，优先保证 16 像素下可辨认。

改了图标但浏览器还显示旧的

这是缓存问题，不是文件问题。强制刷新、清除缓存，或者给文件名加个版本后缀再引用，通常就能看到新图标。

需要准备哪些尺寸

最少准备 favicon.ico 一个文件即可覆盖大多数桌面浏览器。想兼顾手机主屏幕和高分屏，再补 16×16、32×32、180×180、192×192 和 512×512 的 PNG。

favicon 会影响 SEO 吗

favicon 本身不是排名因素，但它会出现在搜索结果和浏览器标签页里，影响用户对网站的第一印象和点击意愿。花几分钟做好，是性价比很高的小优化。

小提示：先在小尺寸预览里确认图案清楚，再上传到网站，可以省去反复替换的麻烦。

准备好图片后，可以直接用 FaviconForge 在浏览器里完成全部转换：免费 favicon 生成器，无需注册、图片不上传，生成后下载文件按上面的步骤放进网站即可。