nuxt.jsnuxt3.jsfavicon

What is a way of adding a favicon in Nuxt 3?


I am not sure how to add a favicon in Nuxt 3. I see many suggestions online, but they all don't seem to work.

I've now put my favicon in the /public folder as favicon.ico, I've run a new npm run dev, and refer to it in my nuxt.config.ts like this:

  app: {
    head: {
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    },
  },

This does not seem to work, also putting it in my app.vue via a useHead() doesn't work:

useHead({
  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
});

Any suggestions?


Solution

  • Okay maybe I was a bit too quick, but in the end I figured it out by indeed relaunching my dev server one or multiple times. I also see a related question popping up on mine, and I suppose this works for people if they stumble across this issue: https://stackoverflow.com/a/7116701/2217725