55

我正在尝试将 favicon 添加到 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]">链接。

有人做过吗？

4

8 回答 8

109
  1. /static在项目根目录中创建一个文件夹。这将被添加到静态导出文件夹中。
  2. 在文件夹中添加 favicon 文件/static。
  3. 根据文档 (nextjs.org)或文档 (github.com)添加_document.js到文件夹。/pages/
  4. 添加<link rel="shortcut icon" href="/static/favicon.ico" />到头部。
  5. npm run build && npm run export

PS感谢之前删除的答案。有用！

编辑：另一种方法是将 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;

更新 ：

已弃用静态目录，取而代之的是公共目录。文档

所以，代码现在看起来像

import Head from 'next/head';

const Page = (props) => (
  <div>
    <Head>
      <link rel="shortcut icon" href="/favicon.ico" />
    </Head>
    // Other layout/components
  </div>
);
于 2019-05-23T03:47:03.550 回答
30

接受的答案很好，但可能值得指出的是，您无需修改​​即可_document.js添加网站图标（也无需添加任何标签head）。

我自己发现将网站图标放入其中_app.js更有意义。该文件很可能已经存在，用于设置页面布局或类似内容。您可以在任何地方Head添加标签（请参阅文档）

所以我结束了_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>
    );
  }
}
于 2019-12-08T01:48:47.700 回答
28

只需在公共文件夹中添加您的 favicon.ico，Next js 将自动为所有页面获取该 favicon。

无需在任何页面或标签中添加任何网站图标链接，无需为网站图标添加链接。

https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md

于 2020-04-26T08:42:23.767 回答
18

自 2020 年 6 月起，您无需添加/编辑document.js或_head.js文件。您需要做的就是将favicon.ico文件放在公共目录中，仅此而已。

于 2020-06-03T05:25:57.013 回答
14

仅添加 .ico 文件是不够的。

将链接标签添加到<Head>部分_document.jsx或_document.tsx问题仅与 .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/文件夹。/favicons/由于公共目录的性质，可以引用此文件夹。

于 2020-05-07T06:44:03.477 回答
4

在我的情况下，没有导入它不起作用：

文件：_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;
于 2020-09-25T00:20:25.783 回答
0

对我来说，它在生产站点中丢失但在本地工作正常，因为我没有在生产站点的工件中添加公用文件夹。我认为 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
于 2022-01-12T19:55:42.800 回答
-1

我认为这对某人有用

<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>
于 2021-05-27T11:49:05.633 回答