Login/Register
Can't change default nuxt favicon
Asked Answered
Solved javascriptvue.jsfrontendnuxt.jsfavicon
I

11

19

I am new to nuxt and trying to change default favicon in my project.

I changed the favicon.png and favicon.ico in my static folder. => didn't work.

changed the favicon.png and favicon.ico in my dist folder. => didn't work.

replaced the proper files generated by favicon generator websites in my dist/_nuxt/icons folder. => didn't work.

and this is my 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' }],
  },

am I missing something?

Inertia answered 20/4, 2020 at 8:51 Comment(3)
Should be working the way you do it. Could you try to remove client cache? – Musil
@Musil I found a bad trick. it is about size – Inertia
Ahh okay, didn't expect that :D – Musil
I
23

I found the solution, but it's kind of tricky and it's a little far from logic.

the size of the favicon should be 32*32 pixels or nuxt will load the default favicon itself.

and about my tries, it's enough to have a file in your static folder and give the path to nuxt.config.js.

but I'm still confused with the solution.

Inertia answered 20/4, 2020 at 10:15 Comment(4)
I did this and it worked for the base favicon, but the icon is still the default NUXT icon for other link tags (e.g rel="apple-touch-icon") – Dorettadorette
I found that there's a node_modules/.cache/pwa/icon directory. I had to remove that and set pwa: { source: '~/static/icon.png' }, in nuxt.config.js – Dorettadorette
@Dorettadorette I think it should be pwa: { icon: { source: '~/static/icon.png' } } That is actually the source directory set by default – Arathorn
There are uite a few websites doing that but you may use this one to generate a 32x32 sized icon. – Thistledown
A
6

Have you tried replace type: 'image/x-icon' with type: 'image/png'?

The infos about this attribute and tag generally can be read here

nuxt will convert object like { head: { link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }] }} to

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

So you can use any attributes listed in the article above.

Asseveration answered 31/7, 2020 at 13:41 Comment(4)
This doesn't seem like a useful answer, in that it appears you are guessing at the solution, and don't provide context into how/why this solution might work. I think this would be better left as a comment to the OP – Tattered
I couldn't leave a comment, sry. but anyway, You were trying to use png as favicon and facing sizing conflict. That's why it can be a solution. At least it works for me – Asseveration
I gotcha @Mik, I forgot about needing rep to comment. Can you update that additional info in your answer at your convenience? Just to make your answer the best it can be =) Looks like the OP may have solved by now, but your answer could be useful to another in the future – Tattered
this answer is to sweep something under the carpet, not solve the question – Celt
S
3

Sometimes it happens when pwa icon stucked in cache. You just need to rename pwa icon in nuxt.config.js like this:

enter image description here

And may be after that it will needs to rebuild project.

Sweetener answered 26/1, 2021 at 9:15 Comment(4)
It is possible that the image you linked might not be available at some point in the future. As such, it would be nice if you could put the code into your answer instead of linking an image. – Unlimited
Please, post relevant code as text, not an image. Unlike images, text can be easily copied and searched. – Stickybeak
Make sure someone else didn't overwrite your pwa in the same file also... happened to me. – Breviary
Solved the issue for me! – Melanochroi
C
3

I had the same problem running a SSR nuxt app. A couple of things to keep in mind:

  1. You need to address the issue with your favicon.png (16x16 pixels or 32x32 pixels as @Hossein stated) and your icon.png file in the static directory. It appears nuxt generates icons based on the icon.png at /static/icon.png (ref). That file should be at least 512x512 (ref). From my test, if it is too small, it has problems generating the larger icons that end up in the node_modules/.cache/pwa/icon location pointed out by @tgf in comments. After running npm run dev you should see a updated icon and see the same thing after running npm run build.

  2. I use matching markup...i.e for favicon.png use rel: 'icon', type: 'image/png', href: '/favicon.png' and if ico use rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'. A bit old but WC3 has example and docs for png.

Campestral answered 27/4, 2021 at 2:37 Comment(0)
N
3

When it comes to Nuxt 3 all you need to do is change the favicon.ico in public folder with your own icon

Nole answered 11/5, 2023 at 11:33 Comment(1)
Yeah but normally a website needs multiple favicons in different sizes. – Catcall
A
1

I have the same problem, this is how I solved it:

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

replace '/favicon.ico' with your icon url. Pay attention to keep href with type, then run npm run build in terminal. Then you can run your porduct again.

Amphithecium answered 28/2, 2022 at 8:55 Comment(0)
D
1

Sometimes, Problem is CACHE

If you remove all files in following directories, and after that, build again, your replaced icons work correctly!

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

or

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

Now, use following commands:

npm run build

npm run generate

I was reading the documentation of Nuxt PWA and Icon Module Section, when this idea came to my mind!

enter image description here

Dishman answered 6/8, 2022 at 20:27 Comment(0)
M
0

i have the same issue, i use this on my head title. the value of company logo is url png, but still show nuxt icon

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

if i see html, the url is generated

Metz answered 13/2, 2023 at 6:58 Comment(0)
U
0

I had the same issue and solved it by converting my image to a favicon standard and format then using it and it was fixed.

but the main change you should make is in nuxt.config.js but with 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' }],
    },
Unexperienced answered 23/8, 2023 at 20:20 Comment(0)
D
0

I had the same issue and changed nuxt.config.ts like this:

export default defineNuxtConfig({
  devtools: { enabled: true },
  app: {
    head: {
      link: [
        {
          rel: "icon",
          type: "image/png",
          href: "/favicon.png"
        }
      ]
    }
  }
})
Disentomb answered 6/4, 2024 at 9:24 Comment(0)
C
0

In Nuxt3 you can simply add multiple favicons in your layout file, just add a <Head> element:

<template>
  <Head>
    <Link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/favicon/apple-touch-icon.png"
    />
    <Link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/favicon/favicon-32x32.png"
    />
    <Link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/favicon/favicon-16x16.png"
    />
    <Link rel="manifest" href="/favicon/site.webmanifest" />
  </Head>

  <slot />
</template>
Catcall answered 19/4, 2024 at 8:44 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.