Vue index.html favicon issue

Question

I am using Vue 2.0 and Vue CLI 3.0. I am trying to get the favicon.ico/png file work properly and am having no luck at all.

I have narrowed the issue to the following.

The index.html file generated by yarn build converts this line of html code:

<link rel="icon" href="favicon.png" >

to...

<!--[if IE]><link rel="icon" href="favicon.png"><![endif]-->

If I go into Chrome developer tools and change the line back to the way I had it originally, the ico/png file renders as expected.

My question is: how do I fix this so that yarn build stops messing up my html code.

Araminta

Are you using webpack template? where did you put favicon.png? – Axis

I wish Vue wasn't trying to be clever about this and instead let it be explicit, easy and straightforward... – Seeress

Answer 1

Inside the vue.config.js set the PWA options for the icons to point to whatever icons you want. Specifically, set pwa.iconPaths for example:

module.exports = {
  pwa: {
    iconPaths: {
       favicon32: 'img/icons/myFavicon.png',
    }
  }
}

See

• https://cli.vuejs.org/config/#pwa
• https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

Romberg

Thank you! Much appreciated Justin. – Araminta

this doesn't seem to be working for me. I attempted to reset all of these values ( not only favicon32 but the other options as well ) and for whatever reason everytime i run my build command it still outputs the default path. not sure if anyone else ran int othis. Im not sure I can attach a screenshot but I can tell you that I have the exact same object structure as Justin's answer, i.e. exports = { pwa: { iconPaths: { favicon32 : ... – Sailor

I also had to add favicon16 pointing to the same png file before it actually worked. Before I tried that, I edited it in my manifest.json and that caused Chrome to download my favicon, but not actually show it. Only adding this pwa stanza actually caused it to work. – Pauli