Nuxtのファビコン
Nuxt はサイトのルートで /public からの静的ファイルを提供するため、/public/favicon.ico は自動的に /favicon.ico になります。マルチサイズまたは SVG アイコンの場合は、app.vue の nuxt.config.ts または useHead() を介してリンク タグを追加します。
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Favicon Generator を使用してファビコン パックを作成します。512×512 のソースから favicon.ico、favicon.svg、および apple-touch-icon.png をエクスポートします。これらを Nuxt プロジェクトの /public フォルダーにドロップします。
Nuxt 3 は、追加の構成を行わずに、ドメイン ルートで /public 内のすべてを提供します。ブラウザはデフォルトで /favicon.ico を要求するため、ファイルをそこに配置することで最も一般的なケースに対応できます。
すべてのアイコン バリアントを明示的に制御するには、app.head.link の下の nuxt.config.ts にリンク タグを追加するか、app.vue で useHead({ link: [...] }) を呼び出します。どちらのアプローチでも、すべてのページの <head> にタグを挿入します。
デプロイ後、プライベート ウィンドウで運用 URL を開き、Favicon Checker を実行して /favicon.ico を確認し、<link rel="icon"> パスが 200 を返すことを確認します。デプロイ後に Nuxt ファビコンが表示されない一般的な理由は、キャッシュされた開発アイコンです。
タブ アイコンは機能するが、Google Search に空白のファビコンが表示される場合は、ライブ ホームページが少なくとも 48×48 の正方形のアイコンにリンクしていることを確認してください。クロールとサイズのルールについては、Google ファビコン要件ガイドを参照してください。
Nuxt は複数サイズの .ico ファイルを自動生成しません。それらのファイルはユーザーが指定する必要があります。 PWA インストール プロンプトと高 DPI タブには、app.head にリンクされている PNG フォールバックを使用します。
使い方
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
/publicに追加
favicon.ico (およびオプションの favicon.svg、apple-touch-icon.png) を Nuxt /public フォルダーにコピーします。
- 3
構成と確認
必要に応じて nuxt.config.ts に app.head.link エントリを追加し、デプロイして、ライブ URL で Favicon Checker を実行します。
今すぐ試す
Generate a Nuxt-ready favicon
ファビコンジェネレーターよくある質問
Nuxt 3 にファビコンを追加するにはどうすればよいですか?+
favicon.ico を /public に配置し、必要に応じて app.head.link の nuxt.config.ts に、または app.vue の useHead() を介して <link rel="icon"> タグを追加します。
Nuxt プロジェクトのファビコンはどこに配置されますか?+
/public ディレクトリ。そこにあるファイルはドメイン ルートから提供されます。/public/favicon.ico は /favicon.ico で入手できます。
Nuxt ファビコンが表示されないのはなぜですか?+
一般的な原因: ファイルが /public にない、app.head に間違ったパス、開発からのブラウザ キャッシュ、デプロイされた URL ではなくローカルホストをチェックしている。シークレット ウィンドウでテストします。
ファビコンには nuxt.config.ts または useHead() を使用する必要がありますか?+
どちらでも機能します。 nuxt.config.ts は、サイト全体の静的なアイコンに最適です。アイコンが実行時の状態またはルートごとのロジックに依存する場合は、app.vue の useHead()。
SVG ファビコンを Nuxt で使用できますか?+
はい — favicon.svg を /public に配置し、{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } を app.head.link に追加します。