如何在Next.js中修改网站图标？谷歌搜索仍显示旧图标求助

第一步：修复页面的Favicon配置 #

你的_document.tsx里只设置了OG图标的引用，没有添加专门的网站图标（favicon）链接标签，这会导致浏览器和搜索引擎无法正确识别新图标。在<Head>标签内添加以下代码：

// 基础ico格式图标适配
<link rel="icon" href="/favicon.ico" sizes="any" />
// 可选：添加svg格式图标适配现代浏览器
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
// 可选：添加苹果设备专用图标
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

注：如果你的新图标只有.ico格式，至少保留第一行代码即可，public文件夹下的文件直接用/文件名就能访问。

修改后的完整_document.tsx示例：

<Html dir={dir}>
    <Head>
        <meta property="og:image" content={`https://ghrafy.com/favicon.ico`} />
        <!-- 添加Favicon配置 -->
        <link rel="icon" href="/favicon.ico" sizes="any" />
        
        <link rel="preconnect" href="https://fonts.googleapis.com"/>
        <link rel="preconnect" href="https://fonts.gstatic.com"/>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet"/>
    </Head>
    <body>
        <Main />
        <NextScript />
    </body>
</Html>

第二步：强制谷歌更新缓存的Favicon #

即使页面配置正确，谷歌可能还在显示缓存的旧图标，按以下操作处理：

• 先验证新图标可正常访问：直接在浏览器地址栏输入https://ghrafy.com/favicon.ico，确认显示的是新图标。
• 打开谷歌搜索控制台，找到对应站点，用「URL检查工具」输入网站首页地址，点击「请求索引」，触发谷歌重新爬取页面。
• 等待谷歌重新抓取并更新搜索结果，这个过程通常需要1-3天。

内容的提问来源于stack exchange，提问作者Hussain Alasdy