0

I have been trying to use my own favicon on my vue.js project for some time. I replaced the original vue favicon with my own and it would not work.

I have tried everything every troubleshooting step I can find. Cache cleared, waited a few days, a query to override cache etc

I think I have now narrowed down the problem but cannot understand why it occurs. When I inspect the built web-app in the browser the link element which references the favicon shows the following:

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

The element is commented out and seems to have an if statement attached to it. Why is this?

Tom Walsh
  • 119
  • 2
  • 12

1 Answers1

3

Its a fallback when you are visiting the website in Internet Explorer below version 11

Internet Explorer <11 doesn't support .png images to be used as favicons, but only .ico files. Support for .png and .gif files only became supported from version 11 and onwards.

enter image description here

So thats why it has the if statement around it, the corresponding element will only be parsed when the browser is IE <11

Note that the <!--[if IE]><![endif]--> is only recognized by Internet Explorer 10 and versions below IE 10

https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)?redirectedfrom=MSDN

Red
  • 6,599
  • 9
  • 43
  • 85
  • Thank you, well that avenue is exhausted now. I still cannot get the favicon to show on any browser. – Tom Walsh Feb 01 '20 at 00:26
  • Thats a sepperate issue tho ;) you could try this out https://www.favicon-generator.org/ it will generate all necessary files for you. – Red Feb 01 '20 at 00:27
  • Do you have documentation where to position all those files in a vue app? I have used that service but only imported the .ico file – Tom Walsh Feb 01 '20 at 00:31
  • Maybe you find you answer here https://stackoverflow.com/questions/40190524/how-to-set-favicon-ico-properly-on-vue-js-webpack-project – Red Feb 01 '20 at 15:29
  • I have read nearly every stackoverflow question about favicons, still no luck – Tom Walsh Feb 02 '20 at 20:36
  • Create a new question for that. – Red Feb 02 '20 at 23:24
  • I did and it instantly received two downvotes with no attempt to answer so I removed it – Tom Walsh Feb 04 '20 at 03:57