Preact-cli: How to change the default favicon folder

Created on 20 Oct 2017 · 7Comments · Source: preactjs/preact-cli

Hey guys, i'd like to know how i can change the default folder of the favicon:

<link rel="shortcut icon" href="/favicon.ico"> is injected in the <head> everytime even though i have a favicon.ico in src/assets/ so I have the preact default favicon visible.

How can i change the favicon folder to another one ?

Thanks!

help wanted maybe question stale

Source

gbreux

Most helpful comment

@developit
Actually, even if i use the custom template, it still creates preact favicon automatically replacing my custom favicon.

Attached the screen shot, that It just adds another shorcut icon favicon, so that it overrides the one that I inserted in the custom template

Can you give me more specific example?

Custom template is recognized, but it overrides favicon. Do we have ways to prevent this?

screen shot 2018-07-02 at 2 18 00 pm

jhjaylim on 2 Jul 2018

👍2

All 7 comments

Do you want to change the favion folder because you don't see the favicon itself ? Maybe it's an ServiceWorker issue as it is caching it ?

I think in general if you want to change the folder you should check this line https://github.com/developit/preact-cli/blob/ae50aaddd18797db4cc9e7d3e281b8b812dac0ad/src/lib/webpack/render-html-plugin.js#L22

and you would need to change this line with a preact.config.js querying the webpack.config and changing this value see: https://github.com/developit/preact-cli#webpack

fokusferit on 8 Nov 2017

Preact CLI aims for a perfect lighthouse score, and IIRC forgoing an icon impacts that. Maybe supply a blank one? FWIW, if you have no favicon declared at all, your server will get a bunch of 404's for /favicon.ico as browsers still attempt to look for it. It's usually best to have one, even if its an empty file.

developit on 8 Nov 2017

@developit The point is not to remove the favicon, just to change his location

@fokusferit I don't think it's a serviceWorker issue. I tried to change the path in the preact-config.js and when i log it, the path is indeed changed, but even though i don't have any reference in my html template about the root ico, i still have a <link rel="shortcut icon" href="/favicon.ico"> injected at build time, which override the one i included manually, and the one from the preact-config file is ignored.

gbreux on 17 Nov 2017

Is it by any chance a problem related to this closed issue #167 ?
I am facing a strange issue on the favicon.ico myself: I just put my own favicon.ico into the /assets folder like in the default template, and still I get preact's default one.
I tried to clear the cache, manually unregister the service worker from the browser, force hard reload, close/reopen Chrome and open my app using incognito window... I still get the default preact icon.
When I monitor the network tab under Chrome, I don't see the favicon.ico being called, but I see this line in the <head></head> portion:

<link rel="shortcut icon" href="/favicon.ico">

and navigating to http://localhost:8080/favicon.ico reaches correct asset.

Now I tried to force call of favicon.ico using preact-helmet module and put this line:

<Helmet
 link={[
{rel:"shortcut icon", href:"/assets/favicon.ico"}
]}
/>

the problem is still the same, but through Chrome's network tab I now see a GET/ favicon.ico.

That being said, npm run build correctly creates /favicon.ico alongside the index.html and npm run serve also seems to take correct asset. So I guess this only a development mode issue.