Parcel renames favicon.ico

[joshuabambrick]

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

Notes:

I struggled for a while to understand why my favicon was not showing properly. It turns out I needed to add <link rel="icon" href="favicon.ico" type="image/x-icon"> to index.html but this did not seem obvious to me and the comment <!-- Place favicon.ico in the root directory --> was not very helpful (in fact, I interpreted it as that I only need to update favicon.ico and not add the above line).

[roblarsen]

We do have it documented and you interpreted it correctly. Browsers pick up favicon.ico in the root of your site. Something else was going on with your icon.

https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md#favicons-and-touch-icon

Favicons and Touch Icon
The shortcut icons should be put in the root directory of your site. favicon.ico is automatically picked up by browsers if it's placed in the root. HTML5 Boilerplate comes with a default set of icons (include favicon and one Apple Touch Icon) that you can use as a baseline to create your own.

read this post by @mathiasbynens for full details

rel="shortcut icon" considered harmful · Mathias Bynens

Also see #2243

[joshuabambrick]

I would ask you to double check this.

I understand that browsers pick it up in the root of the website, however, as I understand it, parcel (built in to h5bp) modifies the file name which means this no longer gets picked up. The file 'mysite/favico.ico' gave me a 404. Having added the above modification, desktop browsers picked up the new favicon, and I can see the file name as favicon.b30494fb.ico in my case.

I have not modified the parcel configuration at all nor renamed favicon.ico, so I don't think this was a problem on my end.

[roblarsen]

I don't need to double check the basic behavior or the way we implement favicons. The commit removing <link rel="shortcut icon" href="/favicon.ico"> is almost ten years old and Mathias' post is even older. So, what you're describing is not an issue with the documentation, but instead a configuration issue with Parcel, which we do provide as a convenience. We would not suggest adding <link rel="icon" href="favicon.ico" type="image/x-icon"> back into the HTML. What we will do is ensure Parcel doesn't cache-bust the favicon.

[joshuabambrick]

Great, I think that would be very helpful.

[coliff]

I find the cache-busting filenames in Parcel to be quite frustrating too.
Perhaps a plugin like this: https://github.com/elwin013/parcel-plugin-static-files-copy is needed?

[vltansky]

Maybe we should migrate to Vite instead?
Vite also has something similar to create-html5-boilerplate https://github.com/vitejs/vite/tree/main/packages/create-app

[roblarsen]

Parcel is dead. Long live WebPack, apparently.

We do need to make sure that things like this don't happen going forward, so thanks for the report.