无法更改默认的 nuxt 图标

Question

我是 nuxt 的新手，正在尝试更改我项目中的默认图标。

我更改了 static 文件夹中的 favicon.png 和 favicon.ico。 => 没用。

更改了我的 dist 文件夹中的 favicon.png 和 favicon.ico。 => 没用。

替换了我的 dist/_nuxt/icons 文件夹中 favicon 生成器网站生成的正确文件。 => 没用。

这是我的 nuxt.config.js

head: {
    title: "my first nuxt proj - main page",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
  },

我是不是漏掉了什么？

Answer 1

我找到了解决方案，但它有点棘手，而且有点不合逻辑。

favicon 的大小应为 32*32 像素，否则 nuxt 将加载默认的 favicon。

关于我的尝试，在您的 static 文件夹中有一个文件并给出 nuxt.config.js.

的路径就足够了

但我仍然对解决方案感到困惑。

Answer 2

您是否尝试过将 type: 'image/x-icon' 替换为 type: 'image/png'？

这个属性和标签的信息一般可以阅读here

nuxt 会将 { head: { link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }] }} 之类的对象转换为

<head>
  <link rel='icon' type='image/png' href='/favicon.png'>
</head>

因此您可以使用上面文章中列出的任何属性。

Answer 3

有时当 pwa 图标卡在缓存中时会发生这种情况。您只需要像这样重命名 nuxt.config.js 中的 pwa 图标：

可能之后需要重建项目。

Answer 4

我遇到了同样的问题运行一个 SSR nuxt 应用程序。需要牢记的几件事：

您需要解决 favicon.png（@Hossein 所述的 16x16 像素或 32x32 像素）和静态目录中的 icon.png 文件的问题。 nuxt 似乎根据 /static/icon.png (ref). That file should be at least 512x512 (ref) 处的 icon.png 生成图标。根据我的测试，如果它太小，它会生成更大的图标，最终出现在@tgf 在评论中指出的 node_modules/.cache/pwa/icon 位置。在运行 npm run dev 之后你应该看到一个更新的图标并且在运行 npm run build.
之后看到同样的东西
我使用匹配标记...即 favicon.png 使用 rel: 'icon', type: 'image/png', href: '/favicon.png'，如果 ico 使用 rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'。有点旧，但 WC3 has example and docs 用于 png。

Answer 5

我也遇到了同样的问题，我是这样解决的：

{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }

将“/favicon.ico”替换为您的图标 url。注意在终端中保持 href 与 type，然后运行 npm run build。然后你可以再次运行你的产品。

无法更改默认的 nuxt 图标

Can't change default nuxt favicon

javascript

favicon

frontend

vue.js

nuxt.js