如何在 Nuxt3 中设置网站favicon.ico图标 - Nuxt3

Nuxt3终于发布了，我想很多人都在等待它。
这次想看看如何在Nuxt3中设置favicon。

Nuxt：3.0.0

首先创建一个图标

首先创建一个图标。一个通用的 favicon.ico 扩展就可以了。

将图标放在公共目录中

/public/favicon.ico

在您的 Nuxt3 项目的根目录中创建一个公用文件夹，并将您的网站图标放在那里。

请注意，Nuxt3 没有像 Nuxt2 那样的静态目录。

在 nuxt.config.ts 中写 favicon loading

编写描述以读取 nuxt.config.ts 中的图标。
从目录传递根路径。

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-16',
      viewport: 'width=device-width',
      title: 'My App',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ],
      htmlAttrs: {
        lang: 'ja',
        prefix: 'og: https://ogp.me/ns#'
      },
    }
  },
});

然后构建并完成。

除了 favicon 之外的 Apple touch 图标可以用同样的方式设置。