VitePress 博客 Google 搜索结果不显示 favicon？3 步搞定

在搭建好 VitePress 博客并提交到 Google 后，我发现搜索结果中我的站点一直没有显示出 logo / 图标，看起来比别的站点就表现状态上矮了一大截。

排查之后发现，问题其实很简单，但很容易被忽略。

1. 现象

在 Google 搜索 site:fishfinal.com 时，结果列表左侧只有文字，没有显示网站的 favicon。

而其他站点（如 GitHub、Stack Overflow）的搜索结果都带有清晰的小图标。

这说明 Google 没有正确抓取到我的站点图标。

2. 排查过程

2.1 检查根目录是否存在 favicon.ico

直接在浏览器访问 https://fishfinal.com/favicon.ico：

如果是 404 → 文件不存在
如果返回一个纯文本内容 → 文件格式不对
如果返回一个清晰的图标 → 文件存在，问题出在引用方式上

我的情况是：文件存在，问题出在引用方式，需要重新生成 favicon 并引用即可。

2.2 检查 HTML 中是否有 favicon 引用

查看首页源码，确认 <head> 中是否有 rel="icon" 的 link 标签。

VitePress 默认不会添加 favicon 引用，除非你在配置中显式指定。

2.3 检查 robots.txt 是否误拦

确认 robots.txt 没有禁止 Google 抓取 /favicon.ico。

3. 解决方案

3.1 生成 favicon 文件

我使用了 favicon.io 在线生成工具：

上传一张方形的 logo 图片
生成包含以下文件的压缩包：
- favicon.ico（主图标）
- favicon-32x32.png
- favicon-16x16.png
- apple-touch-icon.png
- site.webmanifest

3.2 将图标文件放入 `public` 目录

VitePress 的 public 目录下的文件会被原样复制到构建后的根目录。

将解压后的所有文件复制到：

docs/public/
├── favicon.ico
├── favicon-32x32.png
├── favicon-16x16.png
├── apple-touch-icon.png
└── site.webmanifest

3.3 在 VitePress 配置中引用

在 .vitepress/config.mts 的 head 数组中添加：

export default defineConfig({
  head: [
    // ... 其他 meta 标签

    // 标准 favicon
    ['link', { rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' }],
    // 现代浏览器推荐使用 png 格式
    ['link', { rel: 'icon', href: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' }],
    ['link', { rel: 'icon', href: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' }],
    // Apple 设备
    ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
    // 渐进式 Web 应用清单
    ['link', { rel: 'manifest', href: '/site.webmanifest' }],
  ],
})

3.4 重新构建并部署

bash

npm run docs:build
# 部署到服务器

4. 验证方法

4.1 直接访问

在浏览器中打开 https://fishfinal.com/favicon.ico，应该能看到清晰的图标图案。

4.2 在 Google Search Console 中请求重新抓取

进入 Search Console
输入首页 URL
点击“请求编入索引”

4.3 耐心等待

Google 更新搜索结果中的 favicon 可能需要 1-3 天，甚至更长。但只要配置正确，图标最终会显示出来。

5. 注意事项

Google 不保证一定显示 favicon：即使配置正确，Google 也可能因为某些原因不显示，这属于正常现象。
图标需要是方形的：Google 推荐的 favicon 是 48x48 或 32x32 的方形图标。
缓存问题：Cloudflare 或浏览器可能会缓存旧的 favicon，清除缓存后重试。

6. 总结

VitePress 默认不提供 favicon，需要手动配置。关键步骤只有三步：

生成 favicon.ico 及关联图标文件
放入 public 目录
在 config.mts 中通过 head 引用

配置完成后，Google 会逐步更新搜索结果中的图标显示。如果你也遇到类似问题，按上述步骤操作即可解决。

VitePress 博客 Google 搜索结果不显示 favicon？3 步搞定 ​

1. 现象 ​

2. 排查过程 ​

2.1 检查根目录是否存在 favicon.ico ​

2.2 检查 HTML 中是否有 favicon 引用 ​

2.3 检查 robots.txt 是否误拦 ​

3. 解决方案 ​

3.1 生成 favicon 文件 ​

3.2 将图标文件放入 public 目录 ​

3.3 在 VitePress 配置中引用 ​

3.4 重新构建并部署 ​

4. 验证方法 ​

4.1 直接访问 ​

4.2 在 Google Search Console 中请求重新抓取 ​

4.3 耐心等待 ​

5. 注意事项 ​

6. 总结 ​