Nuxt 的网站图标
Nuxt 3 提供站点根目录下 /public 的静态文件。在 app.head.link 下的 nuxt.config.ts 中配置 <link> 标签，以实现集中式、SSR 友好的图标设置。
将 favicon.ico 放在 public/favicon.ico 中 — Nuxt 会自动提供服务，无需额外配置。
在 nuxt.config.ts 中，使用图标条目扩展 app.head.link：{ rel: 'icon', type: 'image/png', Sizes: '32x32', href: '/favicon-32x32.png' }。
仅当图标因路由而异时才在布局中使用 useHead() — 大多数站点在 nuxt.config 中设置一次全局图标。
对于 @nuxtjs/seo 或站点配置模块，请遵循其 favicon 字段（如果存在） - 它包含相同的链接标签。
Nuxt 图像不处理网站图标；将最终尺寸上传到 public/.
使用 Nitro 预设静态托管时，请在 nuxi 生成后验证 .output/public 中是否存在 favicon 路径。
工作原理
- 1
将文件添加到 public/
favicon.ico、PNG尺寸，可选SVG。
- 2
配置app.head.link
将图标链接集中在 nuxt.config.ts 中。
- 3
生成并检查 HTML
查看已部署页面上的源代码以获取正确的标签。
立即尝试
构建您的 Nuxt 图标包
Favicon 包生成器常见问题
Nuxt 仍然显示默认图标 - 为什么？+
清除.nuxt缓存，替换public/favicon.ico，然后重新启动开发服务器。
如何在 Nuxt 3 中添加 apple-touch-icon？+
将 { rel: 'apple-touch-icon', Sizes: '180x180', href: '/apple-touch-icon.png' } 添加到 app.head.link。
SSR 是否会重复 favicon 标签？+
避免在 nuxt.config 和页面级 useHead 调用中定义相同的链接。