如何 generate a favicon：给个人网站加浏览器标签图标

想给刚上线的个人网站加一个浏览器标签页图标，最简单的做法是：准备一张正方形的图片，用在线工具 generate a favicon，得到 favicon.ico 和一组 PNG 文件，放进网站根目录，再在 HTML 的 <head> 里加几行 <link> 标签。整个过程不需要写后端代码，也不需要注册账号。

下面按顺序讲清楚每一步，你照着做，十分钟内就能在标签页上看到自己的图标。

favicon 是什么，为什么值得先做

favicon 就是显示在浏览器标签页、书签栏和历史记录里的小图标。它的文件名通常叫 favicon.ico，但现代浏览器同样支持 PNG、SVG 等格式。

它看起来只是个小装饰，实际作用不小：

• 标签页开得多的时候，图标比标题更容易被一眼认出来。
• 收藏你的网站后，书签栏里显示的是图标而不是默认的空白页符号。
• 它是最便宜的“品牌感”投入——不需要设计系统，一张图就够。

所以刚搭好网站就先把图标做掉，是很划算的顺序。

动手前先准备一张方形图片

在 generate a favicon 之前，先把源图准备好，能省掉后面反复返工。

尺寸与比例

源图建议至少 512×512 像素，正方形。图标最终会被缩到 16×16 或 32×32 显示，所以细节越少越好。

内容要“能缩小”

• 用一个字母、一个简单图形或两三种颜色的组合，比放照片和渐变更容易辨认。
• 避免细线条和小字，缩到 16 像素时会糊成一团。
• 背景不要全透明：浅色主题和深色主题的浏览器都可能把你的图标“吃掉”。

格式

PNG 最稳妥，JPG 也可以，但边缘容易出现杂色。如果你已经有 SVG 版本，可以留着，后面会用到。

分步操作：在浏览器里 generate a favicon

这里用 FaviconForge 举例，它的特点是完全在浏览器本地运行：图片不会上传到服务器，也不需要注册或登录。

1. 打开生成器页面。在浏览器里打开工具页，界面会直接给出上传或拖拽区域。
2. 放入你的方形图片。把准备好的 PNG 拖进去，或者点击选择文件。因为处理在本地完成，图片不会离开你的电脑。
3. 检查预览。工具通常会同时展示 16×16、32×32、48×48 等尺寸的预览。重点看最小的那一档：如果这时已经看不清，就回上一步换一张更简单的图。
4. 生成并下载。点击生成，你会得到一个 favicon.ico（里面打包了多个尺寸）以及若干 PNG 文件。把它们解压到一个文件夹里。
5. 上传到网站根目录。用你的主机面板或 FTP 工具，把 favicon.ico 放到网站根目录，也就是首页 index.html 所在的同一层。这样浏览器访问 /favicon.ico 时就能直接拿到它。
6. 把 PNG 也放上去。建议在根目录建一个 icons 文件夹，把 32×32、180×180、192×192、512×512 的 PNG 放进去，下一步会引用它们。

提示：文件名保持小写，路径里不要带空格，能避免很多莫名其妙的 404。

把图标写进 HTML 和站点清单

文件放好了，还要告诉浏览器去哪里找。打开你的 index.html，在 <head> 里加入下面几行：

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

如果你有 SVG 版本，可以再加一行，让支持的浏览器用矢量图，缩放更清晰：

<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">

另外，建议在根目录放一个 site.webmanifest，这样安卓手机把网站添加到主屏幕时也能用上合适的图标：

{
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

然后在 <head> 里引用它：

<link rel="manifest" href="/site.webmanifest">

路径写法要和你网站的实际结构一致。如果你的站点部署在子目录下，比如 /blog/，记得把开头的 / 改成相对路径。

检查效果与常见问题排查

改完代码，别急着关掉编辑器，先确认图标真的生效了。

怎么验证

• 在浏览器里直接访问你的域名加 /favicon.ico，能看到图片就说明文件位置对了。
• 强制刷新页面（多数浏览器是 Ctrl+F5 或 Cmd+Shift+R），再切到别的标签页看看图标有没有出现。
• 用无痕窗口打开一次，排除缓存干扰。

图标不显示？按这个顺序查

1. 路径错了。打开开发者工具的 Network 面板，刷新页面，看 favicon.ico 请求是不是 404。
2. 缓存没清。favicon 的缓存特别顽固，清掉浏览器缓存或换个浏览器试试。
3. 文件放错层级。确认它和 index.html 在同一目录，而不是在 assets 或 css 里面。
4. 服务器没放行。少数主机默认拦截 .ico 后缀，检查一下服务器配置。

几个让图标更耐看的小建议

做完第一版之后，可以再花几分钟打磨：

• 对比度优先。深色图标配浅色底，或者反过来，比单色更容易在标签栏里跳出来。
• 别放文字。16 像素下两个字基本认不出来，用一个字母或一个符号更有效。
• 和网站主色一致。图标颜色和页面主色调呼应，用户从标签页切回来时会有连贯感。
• 换图标时改文件名。比如把 favicon.ico 改成 favicon-v2.ico 并同步更新 HTML，能绕过一部分缓存问题。

这些调整都不需要重新设计整套视觉，改一张源图，重新 generate a favicon 一次就行。

现在就去生成你的第一个图标

准备好一张正方形图片，打开 FaviconForge 的 favicon 生成器，拖进去、下载、放进根目录、加上那几行 <link>，你的个人网站就有自己的标签页图标了。整个过程在浏览器里完成，不用注册，图片也不会离开你的设备。