Next.jsでfaviconを設定する

Next.js

PR

github.com

Projectの構成はこのような形

$ tree src/pages public
src/pages
├── _app.tsx
├── _document.tsx
└── index.tsx
public
└── static
    └── favicon
        ├── android-chrome-192x192.png
        ├── android-chrome-512x512.png
        ├── apple-touch-icon.png
        ├── browserconfig.xml
        ├── favicon-16x16.png
        ├── favicon-32x32.png
        ├── favicon.ico
        ├── mstile-150x150.png
        └── site.webmanifest

1. publicディレクトリし、画像を置く

project直下にpublicというディレクトリを作成してfaviconの画像ファイルを置いてください。 以前はstaticというディレクトリ名でしたが、非推奨になりました。

github.com

2. pages/_document.tsxを作成し、link tagを追加する

nextjs.org

import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="static/favicon/apple-touch-icon.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="static/favicon/favicon-32x32.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="static/favicon/favicon-16x16.png"
          />
          <link rel="manifest" href="static/favion/site.webmanifest" />
          <meta name="msapplication-TileColor" content="#da532c" />
          <meta name="theme-color" content="#ffffff" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

3. build and exportして確認する

$ npm run build && npm run export