Next.js

Next.js でファビコンを追加する方法メモ

Next.js でファビコンを追加する方法メモです。

Faviconを作る

AdobeXDとかで 512×512px とかで作る
文字いれるなら2文字程度、3文字が限界

Favicon Generator. For real.

https://realfavicongenerator.net/

↑のサイトでファビコンを生成

Next.js で設定

↑でダウンロードしたフォルダを public に配置する

favicons フォルダにすると見通しがよい

_document.tsx に下記を追加

        <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"
          />
          <link rel="shortcut icon" href="/favicons/favicon.ico" />
          <meta name="msapplication-TileColor" content="#da532c" />
          <meta name="theme-color" content="#ffffff" />
        </Head>

-Next.js