无法更改默认的nuxt网站图标

Question

无法更改默认的nuxt网站图标

javascriptvue.jsfrontendnuxt.jsfavicon

18

我刚接触nuxt，正在尝试更改项目中的默认网站图标。

我已经在static文件夹中更改了favicon.png和favicon.ico文件。 => 无效。

我还在dist文件夹中更改了favicon.png和favicon.ico文件。 => 无效。

我也替换了由网站生成网站图标时生成的正确文件，放在了dist/_nuxt/icons文件夹中。 => 无效。

以下是我的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' }],
  },

我有什么遗漏吗？

- Hossein

应该按照您的方式工作。您能否尝试清除客户端缓存？ - ajobi

@ajobi，我发现了一个不好的技巧。它与大小有关。 - Hossein

啊，好的，没想到那样:D - ajobi

9个回答

6

你尝试过将 type: 'image/x-icon' 替换为 type: 'image/png' 吗？

关于这个属性和标签的信息通常可以在这里阅读：这里 Nuxt 将类似{ head: { link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }] }}的对象转换为：

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

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

- Mik

1

这个回答似乎并不实用，因为它看起来像是你在猜测解决方案，并没有提供解决方案如何/为什么有效的上下文。我认为最好将其作为对原帖的评论留下。 - Free Url

抱歉，我无法留下评论。但是，您试图将PNG作为网站图标并遇到了尺寸冲突。这可能是一个解决方案。至少对我有效。 - Mik

我明白了，@Mik，我忘记了需要声望才能评论。你可以在方便的时候在你的答案中更新这个额外的信息吗？只是为了让你的答案变得更好 =) 看起来问题可能已经被解决了，但你的答案将来可能对其他人有用。 - Free Url

这个答案是把问题搁置不谈，而不是解决问题。 - Mohammad Chavoshi

3

有时候 PWA 图标会被卡在缓存中。你只需要像这样在 nuxt.config.js 中重新命名 PWA 图标即可：

也许之后需要重新构建项目。

- Airyng

1

你所链接的图片可能在未来的某个时间点无法访问。因此，如果您将代码放入答案中而不是链接图像，则会更好。 - Max Hille

1

请将相关代码以文本形式发布，而不是图片。与图片不同，文本可以轻松复制和搜索。 - Zsolt Meszaros

确保别人没有在同一个文件中覆盖了你的“pwa”...我曾经遇到过这种情况。 - RaisinBranCrunch

问题已经解决！ - kasra Arab

3

我也遇到了在SSR nuxt应用中运行时的同样问题。需要注意以下几点：

你需要解决favicon.png (16x16像素或32x32像素，如@Hossein所述)和static目录下的icon.png文件的问题。它看起来是由nuxt基于位于/static/icon.png的icon.png生成图标(参考)。这个文件应该至少512x512 (参考)。从我的测试中来看，如果太小，就会出现生成最终在node_modules/.cache/pwa/icon位置上显示的大图标出现问题，正如@tgf在评论中指出的那样。当你运行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提供了png的示例和文档。

- jtlindsey

2

说到 Nuxt 3，你只需要在public文件夹中更改favicon.ico为你自己的图标即可。

- Adrian

1

我有同样的问题，这是我的解决方案：

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

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

- XiaoMan

1

有时候，问题出在缓存上。

如果你删除以下目录中的所有文件，然后重新构建，你替换的图标将能够正常工作！

{rootDir}/node_modules/.cache/pwa/icon

或者

{rootDir}/node_modules/.cache/nuxt/dist/client/icons

现在，请使用以下命令：

npm run build

npm run generate

我正在阅读 Nuxt PWA 和 Icon Module Section 的文档，突然想到了这个想法！

- Mahdi

0

我有同样的问题，我在我的标题中使用了这个。公司logo的值是url png，但仍然显示nuxt图标。

{ rel: 'icon', href: `${storedata.company_logo}?v1` }

如果我看到HTML，URL就会生成

- Ronaldo Cristover

0

我遇到了同样的问题，并通过将我的图像转换为标准和格式的favicon，然后使用它来解决了这个问题。

但是你应该在nuxt.config.js中进行主要更改，而且要使用favicon.ico。

    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.ico' }],
    },

- Mohammadreza Khalili

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hossein · Accepted Answer

我找到了解决方案，但是它有点棘手，离逻辑有点远。

网站图标的大小应该为32*32像素，否则nuxt会自动加载默认的网站图标。

至于我的尝试，只需要将一个文件放在static文件夹中，并将路径提供给nuxt.config.js即可。

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