Can't change default nuxt favicon

Question

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?

Answer 1

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.