Zenn
🧿

【Next.js v13】 Metadata APIを使ってFaviconを設定

2023/07/25に公開
JavaScript
Next.js
#
favicon
tech

バージョン情報

node -> v18.17.0
npm -> 9.6.7
Next.js -> v13.4.10

前提条件

  • appディレクトリ配下に、favicon画像が配置されていないこと
  • 任意のFavicon画像がpublicフォルダに配置されていること
    • 今回は、public/images/Metadata内にfavicon.icoを配置していると仮定します。

Favicon設定

js
+import Favicon from '/public/images/Metadata/favicon.ico';

export const metadata: Metadata = {
  title: 'Next.js',
  description: 'Generated by create next app',
+ icons: [{ rel: 'icon', url: Favicon.src }],
};

いちいち<head>タグの中に、<link>タグを描かなくていいのは、コードがスッキリして良いですね。
もし、他に良い書き方があれば教えてください。

Discussion