如何将网站图标添加到 nextjs 应用程序结构中？- 可能存在水分问题
我试图弄清楚如何将 favicon 文件添加到 next.js 应用程序（使用 React 18）。
我制作了一个 _document 页面，其 head 标签如下：
import * as React from "react"
// import {createRoot} from 'react-dom/client'
import { ColorModeScript } from "@chakra-ui/react"
import Document, { Head, Html, Main, NextScript } from "next/document"
import Favicon from "../components/Favicon"
export default class AppDocument extends Document {
static getInitialProps(ctx: any) {
return Document.getInitialProps(ctx)
}
render() {
return (
<Html lang="en">
<Head>
<meta name="theme-color" key="theme-color" content="#000000" />
<meta name="description" content="name" key="description" />
<meta property="og:title" content="title goes here" key="title" />
<meta property="og:description" content="description goes here" key="og:description" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<Favicon />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
然后我制作了一个名为 Favicon 的组件：
import React from "react";
const Favicon = (): JSX.Element => {
return (
<React.Fragment>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</React.Fragment>
)
}
export default Favicon;
然后，我创建了一个 root/packages/src/public 文件夹（该文件夹与包含 _document.tsx 文件的页面文件夹位于同一级别和位置）并将每个资源保存到其中。
我没有收到错误消息，但网站图标未填充在浏览器选项卡中。
如何在 nextjs 中添加图标？
我还尝试删除 Favicon 组件并将元标记直接移动到 app.tsx。它仍然没有渲染图标。
我可以从控制台错误中看到找不到文件。它们都保存在项目的 public/[文件名] 中。Public是与pages目录同级的文件夹。
小智 5
我解决了这个问题。您需要将图像添加到公共目录中。下一个引擎将favicon自动检测到这一点。
但如果您需要添加特殊图像等，则必须将图像文件添加到public/static文件夹中。并且您的网址应以static/*. 像这样：
<React.Fragment>
<link rel="icon" sizes="76x76" href="static/apple-touch-icon.png" />
</React.Fragment>
最后，要在浏览器选项卡中显示图标，您必须执行硬刷新Ctrl+F5；
| 归档时间： |
|
| 查看次数： |
7082 次 |
| 最近记录： |