【はじめに】
先日Next.jsの環境構築を終えて、さあ開発していくぞ！と思った矢先、
「faviconを好きな画像に変更したいけど、どうしたらいいんだろう、、？」
と、ふと思い調べてみても、なかなか自分の求めている情報に出会えなかったため、備忘録も兼ねてここにまとめておきます。
【環境】
- Node.js - 16.14.0
- Next.js - 13.1.4
- React - 18.2.0
- TypeScript - 4.9.4
【faviconを設定する方法】
- public/favicons内にfaviconに設定したい画像を用意
- src/pages/_document.tsxで、faviconを設定
_document.tsx
~~~
<Head>
<link rel="icon" href="/favicons/sample.png" />
</Head>
~~~
// <link rel="shortcut icon" href="/favicons/sample.png" />
// rel属性にshortcutの記述が必要なのは、IE8以下への対応が必要な時のみなので、
// 基本的には記述しないようにしましょう。
まとめ
Next.jsでfaviconを設定する方法をまとめてみました。
faviconは開発時に何かと忘れられがちな印象がありますが、とても重要なのでぜひこの記事を参考に設定してみてください！
最後まで読んでくださりありがとうございました。
この記事が少しでも、Next.jsでfaviconの設定方法で悩んでいる人の役に立てば幸いです。
もっと良い方法や間違いなどあれば、優しく指摘していただけると嬉しいです。
この記事がいいなと思えば、「いいね」と「フォロー」よろしくお願いします！