乐闻世界logo
搜索文章和话题

How to add a favicon to a next js static site

Next.js
6 个月前提问
2 个月前修改
浏览次数316次

6个答案

1
2
3
4
5
6

在 Next.js 中，当您在静态模式下部署应用程序时，添加 favicon 图标是一项简单的任务。您可以通过以下步骤来实现：

  1. **准备 Favicon 文件：**首先，您需要准备好一个或多个 favicon 文件，通常是 .ico、.png 或 .svg 格式。favicon.ico 是最常见的格式，因为它兼容所有浏览器。但现在很多现代浏览器也支持其他格式，如 PNG 和 SVG。

  2. **将 Favicon 文件放置在 public 目录：**在 Next.js 项目的根目录下有一个名为 public 的目录。您需要将 favicon 文件放到这个目录下。Next.js 会自动将 public 目录下的资源映射到应用程序的根 URL。

  3. **更新 <Head> 组件：**在您的页面组件或是 _app.js 文件中，使用 Next.js 的内置 <Head> 组件来添加指向 favicon 的链接标签。通常，这是在 pages/_app.js 中全局设置，也可以在特定页面的 pages/your-page.js 中设置。

下面是一个如何在 pages/_app.js 中添加 favicon 的例子：

jsx
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 添加 favicon */}
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
        
        {/* 支持其他尺寸的图标 */}
        <link rel="apple-touch-icon" sizes="180x180" 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" />
        
        {/* ...其他可能需要的元素（例如标题，描述等）... */}
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

在上面的代码示例中，我们添加了几个 <link> 标签来定义不同情况下的图标。现代浏览器会根据需要选择合适的图标。

  1. **构建和部署：**完成上述步骤后，当您构建并部署您的 Next.js 应用程序时，favicon 会自动被包括在内，并在浏览器的标签页上显示。

请注意，如果您正在开发环境中进行这些更改，您可能需要重启开发服务器才能看到新的 favicon。

2024年6月29日 12:07 回复
  1. Create a /static folder in project root. This will be added to the static export folder.
  2. Add favicon file in /static folder.
  3. Add _document.js to /pages/ folder according to documentation (nextjs.org) or documentation (github.com).
  4. Add <link rel="shortcut icon" href="/static/favicon.ico" /> to head.
  5. npm run build && npm run export

P.S. Thanks to the previous answer that was deleted. It works!

Edit: Another way is to do this is to import Head into your root layout and add the link there. Anything added to Head gets inserted into the document head tag.

shell
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;

Update :

The static directory has been deprecated in favor of the public directory. Doc

So, the code would now look like

shell
import Head from 'next/head';

const Page = (props) => (
  <div>
    <Head>
      <link rel="shortcut icon" href="/favicon.ico" />
    </Head>
    // Other layout/components
  </div>
);
2024年6月29日 12:07 回复

The accepted answer is nice, but might be worth pointing out that you don't have to modify _document.js for adding a favicon (nor for adding any tags to head).

I found out for myself that placing favicon in _app.js makes more sense. This file is most likely to exist already for setting up a layout for the pages or something like this. And you can add Head tag literally anywhere (see the docs)

So I ended up with _app.js

shell
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <Layout>
        <Head>
          <link rel="shortcut icon" href="/favicon.ico" />
        </Head>
        <Component {...pageProps} />
      </Layout>
    );
  }
}
2024年6月29日 12:07 回复

As of June 2020, you don't have to add/edit the document.js or _head.js files. All you need do to is place the favicon.ico file inside the public directory and that's it.

2024年6月29日 12:07 回复

Only adding .ico file is not enough.

It is not enough as the default.ico file will be used only by desktop browsers. You need to support different devices like tables, smartphones, etc. By adding different sizes the app could be stored on smartphone desktop.

Add link tags to <Head> section in _document.jsx or _document.tsx The question is only about .ico file, but I would recommend to add different dimensions and formats for better support.

shell
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;

You can generate different icons using RealFaviconGenerator and upload results to /public/favicons/ folder. This folder can be referenced by /favicons/ due to nature of public directory.

2024年6月29日 12:07 回复

你的答案