Favicon 是网站的标识图标，可以在浏览器标签栏、收藏夹、书签等位置显示。本文将介绍如何在 Next.js 中添加 favicon。
添加 favicon.ico 文件
首先，在项目根目录的 public 文件夹中添加一个 favicon.ico 文件。favicon.ico 文件可以使用在线生成工具或者自行设计制作。
在 Head 中添加 Link 标签
接下来，在 Next.js 中的页面中，需要在 Head 组件中添加一个 Link 标签，引用 favicon.ico 文件。
import Head from 'next/head'
function MyPage() {
return (
<div>
<Head>
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>Hello Next.js</h1>
</div>
)
}
export default MyPage需要注意的是，在 Next.js 中，Head 组件默认是不包含任何 meta 标签和 link 标签的，要添加这些标签，需要手动添加。
指定不同尺寸的图标
为了在不同场景下显示合适的图标，需要为 favicon.ico 文件提供不同尺寸的图标。具体做法是在 HTML 文档中添加多个 link 标签，每个标签引用不同尺寸的图标文件。例如：
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16"> <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"> <link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48"> <link rel="icon" href="/favicon-62x62.png" type="image/png" sizes="62x62"> <link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192"> <link rel="icon" href="/favicon-512x512.png" type="image/png" sizes="512x512">
总结
添加 favicon 可以提升网站的用户体验，让网站更具有个性化和专业性。在 Next.js 中，添加 favicon 只需在 public 目录中添加一个 favicon.ico 文件，并在 Head 组件中添加一个 Link 标签引用即可。如果需要指定不同尺寸的图标，可以添加多个 Link 标签，每个标签引用不同尺寸的图标文件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3d411add4f0e0ffbfeb84