无法更改默认的 nuxt 图标

Question

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

我更改了

favicon.png

文件夹中的

favicon.ico

和

static

。 => 不起作用。

更改了我的

favicon.png

文件夹中的

favicon.ico

和

dist

。 => 不起作用。

替换了我的

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

我错过了什么吗？

Answer 1

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

favicon 的大小应该是 32*32 像素，否则 nuxt 将加载默认的 favicon 本身。

关于我的尝试，在您的

static

文件夹中有一个文件并给出

nuxt.config.js

的路径就足够了。

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

Answer 2

您是否尝试过将

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>

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

Answer 3

有时当 pwa 图标卡在缓存中时会发生这种情况。您只需在 nuxt.config.js 中重命名 pwa 图标，如下所示：

之后可能需要重建项目。

Answer 4

我在运行 SSR nuxt 应用程序时遇到了同样的问题。有几点需要记住：

您需要解决静态目录中的 favicon.png（16x16 像素或 32x32 像素，如 @Hossein 所说）和 icon.png 文件的问题。看起来
```
nuxt
```
会根据
```
/static/icon.png
```
(ref) 处的 icon.png 生成图标。该文件应至少为 512x512 (ref)。根据我的测试，如果它太小，则生成较大的图标时会出现问题，这些图标最终会出现在 @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 有 png 的示例和文档。

Answer 5

当涉及到Nuxt 3时，您所需要做的就是使用您自己的图标更改public文件夹中的favicon.ico

Answer 6

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

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

将“/favicon.ico”替换为您的图标网址。注意保留href和type，然后在终端中运行

npm run build

。然后你就可以再次运行你的产品了。

Answer 7

有时，问题是缓存

如果您删除以下目录中的所有文件，然后再次构建，则替换的图标可以正常工作！

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

或

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

现在，使用以下命令：

npm run build

npm run generate

当我想到这个想法时，我正在阅读Nuxt PWA和图标模块部分的文档！

Answer 8

我有同样的问题，我在我的标题上使用这个。公司徽标的值为 url png，但仍然显示 nuxt 图标

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

如果我看到 html，就会生成 url

Answer 9

我遇到了同样的问题，并通过将图像转换为网站图标标准和格式然后使用它来解决它，并且它已修复。

但是你应该做的主要改变是在

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

无法更改默认的 nuxt 图标

问题描述投票：0回答：9

9个回答

最新问题

无法更改默认的 nuxt 图标

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9