Nuxt change favicon by page

user_1624255 0
Viewed 3056

I have certain cases where certain routes need a different favicon. I've tried throwing this code in the head, and while this does work, it adds another favicon underneath the previous one, and does not overwrite it.

page.vue:

head () {
    return {
        title: 'my website title',
        link: [{
            rel: 'icon', type: 'image/x-icon', href: 'https://s.yimg.com/rz/l/favicon.ico'
        }]
    }
}

<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://s.yimg.com/rz/l/favicon.ico">

How do you go about overwriting a favicon?

nuxt.js favicon html
2 Answers

Add a hid to the favicon in nuxt.config.js:

link: [{
    hid: 'icon',
    rel: 'icon',
    type: 'image/x-icon',
    href: 'link-to-fallback-favicon.png'
}]

You can now overwrite it in the pages head method by using the same hid:

head()
    return {
        link: [{
        hid: 'icon',
        rel: 'icon',
        type: 'image/x-icon',
        href: 'link-to-new-favicon.png'
}]

Nuxt will automatically overwrite once you navigate to that page, and use the general once from nuxt.config.js when you navigate away.

user_51225810

I think this link can help you

https://reactgo.com/nuxt-change-favicon/

  1. Open the nuxt app in your favorite code editor.
  2. Navigate to the static folder and delete the favicon.ico file.
  3. Now, add a new favicon inside the static folder.
  4. Reload your nuxt app to see the new favicon.
user_45286650
Related