Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

to my favicon reference in index.html?

Ask Question

I created a Vue 3 web app, featuring Vuex, Vue Router, etc, and I have filled out the manifest and set up PWA features as well. I noticed that in production my favicon is not loading, and the default browser icon is applied.

I checked the "Elements" tab in the Chrome dev tools to find that the reference to my favicon has been wrapped in this if statement for internet explorer.

Example:

<!--[if IE]><link rel="icon" type="image/x-icon" href="/resources/icons/favicon.ico" /><![endif]-->
I have also referenced the icon in my manifest, and given it many options for sizes, even though I only have one size file right now. (256x256)
the "public" folder is working as expected, eg. I can navigate to myapp.com/resources/icons/favicon.ico which returns the file successfully after the build.
When the PWA is installed, it does use the correct sized images from the manifest, installing on Chrome both on desktop and mobile seem to show the icon fine, though those are different assets.
Should I only specify the favicon in index.html or in the manifest instead of both? Is there a setting somewhere in the manifest or in my Vue app that is triggering this "IE if" statement to be applied?
I am still not too keen on this manifest business or with PWAs in general, but I want to create a good client experience, so any information you can point me to would be very appreciated.
Thank you.
                That code is supposed to run only in IE and is probably automatically generated by webpack during the bundling. That code will be ignored by IE >= 10 and modern browsers. Are you certain there is no other link element in the HTML that references the favicon? Does your source HTML code for the index.html page include this? (it should not).
– Aleksandar Bencun
                Nov 9, 2020 at 19:41
                I explored the header again and see that yes, after referencing the manifest, new post-build resource references were created, but they are different than what was set in the manifest pre-build. Am I not supposed to reference the favicon/manifest or other resources in the pre-build public folder in index.html?
– Caine Nielsen
                Nov 10, 2020 at 23:04
                I had this problem too and I simply added the <link rel="icon" src="..." /> tag to my index.html two times. The first one gets wrapped in the IE statement by Vue and the second one not.
– grorp
                Apr 10, 2021 at 13:07
                @grorp while that works, it's not really smart. I'd rather find out what's commenting out my code than writing my code twice because I don't understand why it gets commented. We're supposed to be in control over the output, right?
– tao
                Jun 24, 2021 at 8:34
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.