javascriptvue.jsfrontendnuxt.jsfavicon

Can't change default nuxt favicon


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?


Solution

  • 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.