NextJS 13（App目录）网站Google搜索结果favicon缺失问题排查

问题背景 #

网站上线数周，索引/跟随规则、索引状态及SEO属性均正常，但Google搜索控制台及搜索结果中显示Favicon缺失。已配置Webmanifest文件和页面头部标签，所有图标可正常访问，使用Next.js 13 App目录模式。

Webmanifest内容：

{
    "theme_color": "#007FFF",
    "background_color": "#000000",
    "display": "standalone",
    "scope": "/",
    "start_url": "https://bestdosgames.com",
    "name": "bestDOSgames.com",
    "short_name": "bestDOSgames.com",
    "icons": [
        {
            "src": "/android-icon-36x36.png",
            "sizes": "36x36",
            "type": "image/png",
            "density": "0.75"
        },
        {
            "src": "/android-icon-48x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "density": "1.0"
        },
        {
            "src": "/android-icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "density": "1.5"
        },
        {
            "src": "/android-icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "density": "2.0"
        },
        {
            "src": "/android-icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png",
            "density": "3.0"
        },
        {
            "src": "/android-icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "density": "4.0"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png",
            "density": "4.0"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png",
            "density": "4.0"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "density": "4.0",
            "purpose": "maskable"
        }
    ]
}

页面头部标签：

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

可能遗漏的配置点 #

1. Next.js App目录的Favicon自动处理冲突 #

Next.js 13 App目录模式下，默认会读取app/favicon.ico或app/icon.png作为全局Favicon，手动添加的头部link标签可能和框架自动生成的标签冲突，导致Google无法识别正确的资源。

解决方式：

• 将主Favicon文件（如favicon.ico或48x48的PNG）放到app目录下。
• 删除手动添加的rel="icon"标签，改用Next.js的metadata配置：
  在app/layout.tsx中配置：

  import type { Metadata } from 'next';
  
  export const metadata: Metadata = {
    icons: {
      icon: [
        { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
        { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
        { url: '/favicon-48x48.png', sizes: '48x48', type: 'image/png' },
      ],
      apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
      manifest: '/manifest.webmanifest',
    },
  };
  

2. 缺少Google优先识别的48x48尺寸图标 #

Google搜索结果优先抓取48x48像素的Favicon，当前配置中：

• 头部标签未明确指定48x48的PNG图标。
• favicon.ico可能未包含48x48尺寸（很多旧ICO文件只有16x16/32x32）。

解决方式：

• 添加48x48尺寸的图标标签：

  <link rel="icon" href="/favicon-48x48.png" sizes="48x48" type="image/png">
  

• 重新生成包含16x16、32x32、48x48三种尺寸的favicon.ico文件。

3. Webmanifest图标缺少通用用途声明 #

Google会从Webmanifest中读取图标，但你的48x48图标未添加purpose="any"属性，可能被识别为仅适配特定场景的图标。

解决方式：
在Webmanifest的48x48图标条目中补充purpose属性：

{
  "src": "/android-icon-48x48.png",
  "sizes": "48x48",
  "type": "image/png",
  "density": "1.0",
  "purpose": "any"
}

4. 强制Google重新抓取资源 #

即使配置正确，Google可能仍缓存旧的资源数据，需要手动触发重新抓取：

• 打开Google搜索控制台，进入「网址检查工具」，输入首页URL，点击「测试实时网址」。
• 进入「外观 > Favicon」模块，查看是否有报错提示，修复后提交重新索引请求。

内容的提问来源于stack exchange，提问作者Kristián Stroka