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.

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