Next.js で正しく favicon を設定する

要約
Next.js のプロジェクトで favicon がうまく設定できない、もしくはエラーが出てしまうことがあります。`app` ディレクトリに 3 つのファイルを入れることで、自動的に head タグに適切なメタデータが自動生成されるようになります。
意見はこのエリアに表示されます

最近、自分の Next.js プロジェクトでも 意外と favicon の設定に手間取りました。特に何も考えずに public フォルダに置いた favicon.ico が原因でエラーが出ていたんですが、その対処方法をここに書いておきます。これが同じように悩んでいる方の助けになればと思います。

favicon の設定

以下のようなエラーが出る場合があります。

http://localhost:3000/favicon.ico 500 (Internal Server Error)

これを防ぐには、app ディレクトリに以下の 3 つのファイルを入れます。

  • favicon.ico
  • icon.ico
  • apple-icon.png

これらのアイコンファイルを app ディレクトリ内に置くだけで、Next.js が自動的に <head> タグに適切なメタデータを生成してくれます。 また、同時に public フォルダに配置している favicon.ico を削除することを忘れないでください。これを残したままにすると、上記のエラーが発生する原因になります。

/app フォルダに favicon.ico ファイルをドロップすると、Next.js が自動的に head タグ内に正しいメタデータを生成してくれます。

例えば、以下のようなコードが自動的に生成されます。

これで、ブラウザが正しくアイコンを読み込んでくれるようになります。

Next.js における favicon 設定のベストプラクティス

favicon の設定について、いくつかのベストプラクティス。

適切なファイル形式とサイズを使用する

favicon は一般的に .ico ファイル形式が使用されますが、その他に .png などもサポートされています。16x16、32x32 などのサイズを用意することで、様々なデバイスに対応できます。

複数のアイコンを用意する

デバイスによって使用されるアイコンが異なるため、apple-icon.png や icon.ico など複数のバリエーションを用意しておくと、iOS や Android などのモバイル端末にも対応できます。

コードでのカスタマイズ

自動的に生成されるコードに加えて、独自に link タグを追加することで、特定のプラットフォームに向けたアイコンをカスタマイズできます。例えば、以下のように apple-touch-icon を追加することができます。

おわりに

favicon の設定は小さなことのように思えますが、プロジェクト全体の完成度を高める重要なポイントです。この手順を踏むことで、よりスムーズに favicon を反映させることができます。もし同じようなエラーに直面している方がいたら、この記事が少しでも助けになると嬉しいです。

参考

Explore More
関連記事はありません。
Trends