Nuxt 的网站图标
Nuxt 在站点根目录中提供来自 /public 的静态文件，因此 /public/favicon.ico 自动变为 /favicon.ico。对于多尺寸或 SVG 图标，请通过 nuxt.config.ts 或 useHead() 在 app.vue 中添加链接标签。
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 文件 - 您必须提供它们。使用 app.head 中链接的 PNG 后备来实现 PWA 安装提示和高 DPI 选项卡。
工作原理
- 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
Favicon 生成器常见问题
如何在 Nuxt 3 中添加网站图标？+
将 favicon.ico 放入 /public，然后可以选择在 app.head.link 下的 nuxt.config.ts 中添加 <link rel="icon"> 标签，或通过 app.vue 中的 useHead() 添加 <link rel="icon"> 标签。
Nuxt 项目中的图标位于何处？+
/public 目录。那里的文件是从您的域根提供的 - /public/favicon.ico 在 /favicon.ico 上可用。
为什么我的 Nuxt 图标没有显示？+
常见原因：文件不在 /public 中、app.head 中的路径错误、开发人员的浏览器缓存或检查 localhost 而不是部署的 URL。在隐身窗口中进行测试。
我应该使用 nuxt.config.ts 还是 useHead() 作为网站图标？+
要么有效。 nuxt.config.ts 最适合静态站点范围的图标；如果图标取决于运行时状态或每个路由逻辑，则 useHead() 位于 app.vue 中。
我可以在 Nuxt 中使用 SVG 图标吗？+
是 - 将 favicon.svg 放入 /public 中，并将 { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } 添加到 app.head.link。