Why is the link to favicon element commented out on build?
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?
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.
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