最近、自分の Next.js プロジェクトでも 意外と favicon の設定に手間取りました。特に何も考えずに public フォルダに置いた favicon.ico が原因でエラーが出ていたんですが、その対処方法をここに書いておきます。これが同じように悩んでいる方の助けになればと思います。
favicon の設定
以下のようなエラーが出る場合があります。
これを防ぐには、app ディレクトリに以下の 3 つのファイルを入れます。
- favicon.ico
- icon.ico
- apple-icon.png
これらのアイコンファイルを app ディレクトリ内に置くだけで、Next.js が自動的に <head> タグに適切なメタデータを生成してくれます。
また、同時に public フォルダに配置している favicon.ico を削除することを忘れないでください。これを残したままにすると、上記のエラーが発生する原因になります。
参考：Delba Oliveira's tweet on handling favicons
/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 を反映させることができます。もし同じようなエラーに直面している方がいたら、この記事が少しでも助けになると嬉しいです。
