Vue index.html favicon issue

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.

Solution

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