Favicon loading from assets is not working in nuxt3

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

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

Solution

You can't do this because nuxt doesn't convert paths in the head object and sets exactly your path in the head and after the 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.

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' }]
        }
    },