Can't change default nuxt favicon

javascript vue.js frontend nuxt.js favicon

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.

javascript vue.js frontend nuxt.js favicon

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.

javascript vue.js frontend nuxt.js favicon

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

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

CodeHunter