I am trying to load favicon from assets in nuxt 3 but it does not work except if I hardcode _nuxt in front of it. My config looks like this and this works:

 export default defineNuxtConfig({ app: { head: { link: [{ rel: 'icon', type: 'image/png', href: '_nuxt/assets/favicon.png' }] } }, 

But according to documentation it should be something like this:

 ~assets/favicon.png 

or

 ~/assets/favicon.png 

but both don't work.
Any way to do it as documented or is this a bug?

AddOn Info: If using the links in a vue component it works and the favicon loads correctly if I show it on the page.

2 Answers

You can't do this because nuxt don't convert paths in the head object and sets exactly your path in the head and after build, there is no assets file.

you can use _nuxt or this :

export default defineNuxtConfig({ app: { buildAssetsDir: '/something/', head: { htmlAttrs: { dir: 'rtl', lang: 'fa' }, link: [{ rel: 'icon', type: 'image/png', href: "/something/assets/images/logo.png" }] }, }, }) 

by default buildAssetsDir's value is _nuxt but you can change it.

read more:

Another solution

Why you don't use public/ directory for that because:

The public/ directory is directly served at the server's root

and why do you need a module bundler to process your favicon? so you can use this:

export default defineNuxtConfig({ app: { head: { link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }] } }, 

read more:

You can fix it with static folder settings.

export default { static: { prefix: false } } 

or

export default { build: { publicPath: ' } }