PR
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というディレクトリ名でしたが、非推奨になりました。
2. pages/_document.tsxを作成し、link tagを追加する
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