如何将 favicon 添加到 Next.js 静态站点？
Posted
技术标签:
【中文标题】如何将 favicon 添加到 Next.js 静态站点？【英文标题】：How to add a favicon to a Next.js static site? 【发布时间】：2019-10-06 08:33:25 【问题描述】：我正在尝试将图标添加到 Next.js 静态站点，但运气不佳。
我尝试使用来自'next/document' 的组件自定义文档
https://nextjs.org/docs/#custom-document
指向 favicon.ico 文件的直接链接不起作用，因为该文件未包含在构建中，并且 href 未更新为 /_next/static/...
导入图像并添加到链接的 href 也不起作用（请参阅注释掉的行）。
import React from 'react';
import Document, html, Head, Main, NextScript from 'next/document';
// import favicon from '../data/imageExports';
export default class MyDocument extends Document
static async getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx);
return ...initialProps ;
render()
return (
<Html>
<Head>
/* <link rel="shortcut icon" href=favicon /> */
<link rel="shortcut icon" href="../images/icons/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
添加了网站图标链接，但它不显示。我希望它在我导入文件时能够工作，但它只是添加了一个 <link rel="shortcut icon" href="[object Object]"> 链接。
有人做过吗？
【问题讨论】：
只需将您的 .ico 文件添加到您的 /public 文件夹，Next js 就会将其拾取并用作您的 favicon。 【参考方案1】：无需经历额外的麻烦，只需在 /public 中添加一个 favicon.ico 即可。
【讨论】：
【参考方案2】：对我来说，生产站点中缺少它，但在本地工作正常，因为我没有在生产站点的工件中添加公用文件夹。我认为 next.js 会将它需要的所有内容放在 .next 文件夹中，但事实并非如此。
cp -R ./.next/ artifacts/
cp -R ./node_modules/ artifacts
cp -R ./public/ artifacts #missing line in my github action code
cp package.json ./artifacts/package.json
【讨论】：
【参考方案3】：已接受的答案很好，但可能值得指出的是，您没有修改 _document.js 以添加网站图标（也不向 head 添加任何标签）。
我自己发现将 favicon 放在 _app.js 中更有意义。该文件很可能已经存在，用于设置页面布局或类似内容。你可以在任何地方添加Head标签字面意思（见the docs）
所以我最终选择了_app.js
class MyApp extends App
render()
const Component, pageProps = this.props;
return (
<Layout>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
<Component ...pageProps />
</Layout>
);
【讨论】：
它对我不起作用，唯一有效的方法是我将 faricon 放入静态文件夹 您可以将您的网站图标存储在您想要的任何地方，这个问题是关于如何将它添加到网站，而不是在哪里找到文件。所以可能你只是指定了错误的网站图标路径。【参考方案4】：我认为它对某人有用
<Head>
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="/favicons/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="128x128" href="/favicons/favicon-128x128.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicons/favicon-196x196.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/android-chrome-512x512.png" />
<link rel="shortcut icon" href="/favicons/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png"/>
<meta name="msapplication-square70x70logo" content="/favicons/mstile-70x70.png"/>
<meta name="msapplication-square150x150logo" content="/favicons/mstile-150x150.png"/>
<meta name="msapplication-square144x144logo" content="/favicons/mstile-144x144.png"/>
<meta name="msapplication-square310x310logo" content="/favicons/mstile-310x310.png"/>
</Head>
【讨论】：
【参考方案5】：只需在公共文件夹中添加您的 favicon.ico， Next js 会自动为所有页面使用该图标。
无需添加任何网站图标链接到任何页面或标签中无需添加网站图标链接。
https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md
【讨论】：
谢谢！我只需要替换公用文件夹上的当前 favicon.ico 即可。使用下一个 v10.0.2 最佳答案！ 这个问题是格式错误，因为需要至少 24 个网站图标资产？ 这对我来说非常有效，只需将 ico 文件添加到 /public 并繁荣！ 公共文件夹中的资产可以被浏览器访问。 Tour 浏览器将查找 favicon.ico 文件，而不是 Next。但是，如果您没有链接，则手机和平板电脑会出现问题。尤其是当有人尝试保存指向其应用启动器的链接时，该图标不会使用网站图标。【参考方案6】：在我的情况下，如果没有导入，它就无法工作：
文件：_app.tsx
import AppContext, AppProps from "next/app";
import "../styles/common.scss";
import Head from 'next/head';
//For me it didn't work without the following import...
import favico from "../static/favicon.ico";
function MyApp( Component, pageProps : AppProps)
const csrfToken = pageProps["anti-csrftoken-a2z"];
return (
<div>
<Head>
<link rel="shortcut icon" href=favico type="image/x-icon" />
</Head>
<Component ...pageProps />
</div>
);
MyApp.getInitialProps = async ( Component, ctx : AppContext) =>
let pageProps = ;
if (Component.getInitialProps)
pageProps = await Component.getInitialProps(ctx);
return pageProps ;
;
export default MyApp;
【讨论】：
【参考方案7】：仅添加 .ico 文件是不够的。
将链接标签添加到_document.jsx 或_document.tsx 中的<Head> 部分问题仅与.ico 文件有关，但我建议添加不同的尺寸和格式以获得更好的支持。
import React from 'react';
import Document, Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps from 'next/document';
class MyDocument extends Document
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps>
const initialProps = await Document.getInitialProps(ctx);
return ...initialProps ;
render(): React.ReactElement
return (
<Html>
<Head>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#ffc40d" />
<meta name="theme-color" content="#ffffff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
export default MyDocument;
您可以使用RealFaviconGenerator 生成不同的图标并将结果上传到/public/favicons/ 文件夹。由于public directory 的性质，此文件夹可以被/favicons/ 引用。
【讨论】：
非常感谢。我认为一个网站图标的代码太多了，但您的解决方案有所帮助 唯一正确的答案；因为您至少需要 24 个网站图标才能跨设备兼容。【参考方案8】：自 2020 年 6 月起，您无需添加/编辑 document.js 或 _head.js 文件。您只需将favicon.ico 文件放在公共目录中即可。
【讨论】：
我已将“favicon.ico”添加到文件夹 public，但是当我运行 build 时，我没有看到在文件夹 .next 中编译 favicon。你有一个例子吗？谢谢你。 它不会被放入任何其他文件夹中，您只需将其留在公用文件夹中即可。如果它在那里，nextjs 会捡起它并使用它。我正在使用 next@9.4.4。 我也在使用 next@9.4.4。但仍然遇到同样的问题:( 我正在使用 Next 9.5.0，我将 favicon.ico 文件放在公共目录中，瞧，它工作了！！谢谢@AndresZapata【参考方案9】：-
在项目根目录中创建一个
/static 文件夹。这将被添加到静态导出文件夹中。
在/static 文件夹中添加网站图标文件。
根据documentation (nextjs.org)或documentation (github.com)将_document.js添加到/pages/文件夹。
将<link rel="shortcut icon" href="/static/favicon.ico" /> 添加到头部。
npm run build && npm run export
附：感谢已删除的previous answer。有效！
编辑：另一种方法是import Head 到你的根布局中并在那里添加链接。添加到 Head 的任何内容都会插入到文档的 head 标签中。
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/static/favicon.ico" />
</Head>
// Other layout/components
</div>
);
export default Page;
更新：
已弃用静态目录，取而代之的是公共目录。 Doc
所以，代码现在看起来像
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
// Other layout/components
</div>
);
【讨论】：
文档链接现在在这里：nextjs.org/docs/advanced-features/custom-document 或 github.com/zeit/next.js/#custom-document 虽然这行得通，但现在 next.js 更喜欢/public 文件夹而不是 /static github.com/zeit/next.js/blob/master/errors/…
您为什么拒绝他们的编辑只是为了重新应用更改？另外，我可以确认答案已被删除；我添加了screenshot 以供将来参考。
@S.S.Anne 这对 Tesseracter 的编辑来说是一个错误点击，编辑很好 - 我对此表示歉意，所以我把它回滚了。关于删除的答案，我不知道那个人为什么删除它，那个解决方案当时有效。
它对我不起作用，它显示了 React Favicon Logo 并一直在加载。我所做的只是添加..，所以它将是：<link rel="shortcut icon" href="../static/favicon.ico" />。 P.S：我使用的是9.0.6之前的版本，这就是为什么我仍然使用static公共目录。谢谢@AdvaitJunnarkar！以上是关于如何将 favicon 添加到 Next.js 静态站点？的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Font Awesome 添加到 Next.js 项目
如何使用 Next.js 将 PNG 徽标添加到 Tailwind CSS 导航栏？
如何在使用尾风 css 时在本地将谷歌字体添加到 Next.Js 项目
将 next.js 添加到组件库中以使用 Next.js 功能
如何在不上传 favicon 文件的情况下将 favicon 添加到 Google colab 上的 Flask 路由？