Favicon 在 Nextjs _document.js 中不起作用答案

【问题标题】：Favicon not working in Next.js _documents.jsFavicon 在 Nextjs _document.js 中不起作用
【发布时间】：2021-02-05 02:46:44
【问题描述】：

这是我的 _document.js 中的代码：

import Document, { Head, Main, NextScript } from 'next/document';

<html lang="id">
    <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link rel="icon" type="image/x-icon" href="../static/favicon.ico" />
    </Head>
    <body className="custom_class">
        <Main />
        <NextScript />
    </body>
</html>

我已确认该网站图标位于我根目录的静态文件夹中：

我尝试将头部放在 index.js 中，将 favicon 移动到公共文件夹中，并使用不同的图标。在我的其他 Next.js 项目中，网站图标也不会加载。我已经在 Firefox、Edge 和 Chrome 中尝试过。这是怎么回事？

【问题讨论】：

标签： next.js

【解决方案1】：

Next.js 提供来自 public 文件夹的静态文件（无法更改）。您的代码可以从基本 URL (/) 开始引用其中的文件。

在您的情况下，您需要将 static 文件夹重命名为 public，然后将 _document 中的图标引用为：

<link rel="icon" type"image/x-icon" href="/favicon.ico" />

【讨论】：