由于某种原因，我的图标不起作用。
我将图标保存为 favicon.ico 在/public 目录中，并在我的页面<Head>(位于/pages 目录中(中引用它，但无济于事。
谁能帮忙？
-
这是我的索引代码.js：
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
dir/pages/index.js
dir/public/favicon.ico
将 favicons 放在/public目录内的/image目录中，并将下面的代码放在您的_app.js
<Head>
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"/>
</Head>
.ico图像的创建可能不正确 - 可能是从.png在线转换的。这将导致图像在浏览器和其他地方可见，但无法用作网站图标。
要进行故障排除，请尝试使用.png而不是.ico，看看问题是否仍然存在。如果这解决了您的问题，请考虑使用专门针对网站图标的转换器，即 https://favicon.io/favicon-converter/
在我的情况下，该文件位于正确的位置(/public/favicon.ico(，被正确引用(href="/favicon.ico"(，并且在访问http://localhost:3000/favicon.ico时被提供，但它没有显示在浏览器选项卡中，直到我重新转换它。
我面临着与您完全相同的问题。 似乎有必要将图像文件放在/public/images/中
一旦我完成此操作，它就会正常工作。
仅在使用 nextbasePath时遇到问题时才有用：
我遇到了一个问题，我的图标没有出现。就我而言，这是因为我在下一个配置中使用了basePath: '/some-base-path'。添加basePath时，它会更改静态资产的路径。
示例：具有图像的 basePath/test在public/favicon.ico可以引用在/test/public/favicon.ico
调试说明：我还必须清除缓存才能查看更改(或尝试隐身(。
就我而言，我在src/目录中public/。
我把它改成：
.
├── next.config.js
├── public
│ ├── favicon.ico
│ └── img
└── src
├── pages
└── styles
(public/移至根.(
在为生产构建应用程序时，只需从根目录剪切favicon.ico并粘贴到公共文件夹中即可。
应用路由器：
将 favicon.ico 放在公共/img 文件夹中 y a 然后添加到布局中.js
<head>
<link rel="icon" href="/img/favicon.ico" sizes="any" />
</head>
从：/favicon.ico中删除/，如果格式ico有效，则应加载图像。如果不起作用，请将.ico图像转换为.png或.jpg。
<link rel="icon" href="favicon.ico" />
我在创建网站图标时遇到了此错误，结果发现我在type中输入了错误的图像格式！例如，我这样做了：
<link rel="icon" type="image/png" href="/favicon.ico">
但事实证明，我不得不将image/png更改为image/x-icon，因为格式不匹配。
<link rel="icon" type="image/x-icon" href="/favicon.ico">
继续@joematune答案，如果您从.png或类似的东西转换.ico，它可能无法在随机网站上工作。初学者工具包中的 readme.md 文件共享一个成功转换它的链接。作为赏金，它还为您提供了一堆变化(16x16,32x32，苹果触摸等(。只是用新文件替换旧文件对我有用，而无需修改任何内容。
这是链接
如果您认为您的配置是正确的，但它仍然不起作用，请清除.next文件夹并再次运行yarn build。这次应应用更改。
将图标保存到/public 中，并像这样使用：
<link rel="icon" href="/favicon.ico" />
对于在 Next.js 配置文件中使用basePath属性的任何人， 我已经解决了这个问题，将我的basePath值添加到<link>标签的属性href。
例如(
<link rel="icon" href="/[yourBasePath]/images/favicon.ico"