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.

Are you using webpack template? where did you put favicon.png? — Roozbeh, Oct 07 '18 at 06:51
I wish Vue wasn't trying to be clever about this and instead let it be explicit, easy and straightforward... — tkit, Oct 04 '21 at 16:41

score 13 · Accepted Answer · answered Oct 08 '18 at 07:10

13

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

answered Oct 08 '18 at 07:10

Justin Kahn

Thank you! Much appreciated Justin. – Bill Haack Oct 08 '18 at 15:47
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 : ... – Erik White Dec 12 '18 at 22:00
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. – GaryO Mar 29 '19 at 21:24

1 Answers1