Favicon not showing up in browsers or mobile devices

Dear Favicon Gurus

I am using a recently purchased (2024) RapidWeaver Classic program to build a simple site (www.WASHA.org.au). My version of RapidWeaver is RapidWeaver Classic, v.9.2.1. I am using a simple business theme with Clean Menu. On the icons page, Settings > Web Icons, I have populated the icons for various devices. See attached image. All I want is that a favicon is displayed by folks browsing this site. However, I cannot see any favicon on Google Chrome, Safari, iphones and iPads after 2 weeks of trying. I might be missing a step somewhere.

When you click Preview at the top of your screen and it opens your default browsing app can you see the favicon in the tab? If you can see it, and publishing appears to have worked ok, post a link to the site. It may simply be a cache issue as detailed above.

Not sure what all the text is in the examples in your screenshot but they won’t be legible as a favicon, it will look like the smallest version on your screen, the 16 x 16.

Hi jbyfield:
Thank you for looking into my issue.
On the preview, unfortunately there is no favicon.
Regarding my screen shot, I have taken a close up of the 3 small images. All are miniature icons: 64x64, 32x32 and 16x16.
There must be a step that I am missing.
Thanks,
Richard

Hi @rhriley,

I think it’s a caching issue on your end, as I see the favicon when I visit your page:

Capto_Capture 2024-04-23_09-12-35_

Cheers,
Erwin

I didn’t notice that you had posted the link. I don’t see the favicon that I was expecting. This is Chrome -
Untitled

This is Safari -
safari

Your web icons page in RW looks exactly like mine and I can see your favicon when I look at the code for your site - not sure if the fact you have two favicons referenced in the code is an issue? If it was me (and I don’t know much) I would change the favicon to a totally black square or something and republish and check whether that works.

Side note, Guides here and here on how to take screenshots on your Mac in case you need it. Easier and clearer than taking pictures with your phone.

On Chrome, the favicon is not showing due to a mixed content warning. Your favicon URLs aren’t being loaded over https:

If I edit the URLs to include https:// the favicon shows up:

Once you fix that it will probably start working in Safari too.

Do you have your Website Address set with https:// in your Project File Settings >> General >> Website Address field? If not you will need to change it there to https:// and republish. (Make sure the website address is also set to https:// in the Publishing Settings >> Web Address field too.)

Also, you should remove the space in your favicon image. It should be something like WASHA-logo.svg. Fix that, remove the favicon image from your resources, and re-add it without the space, then add it back to the favicon area in RW.

1 Like

Thanks Erwin.

Apparently there are some issues with the http vs. https configurations. My site also issues a security warning to Android users, I have been told. Working on that now.

Sincerely

Richard

1 Like

Thanks Dan. Yep, I was being very lazy.

Richard

Hi Dan

This is very helpful information. Thank you so much. After I received the SSL last month, I had not set the web address as https:// etc. Things seem to have improved a lot.

And regarding the favicon image, I will work on that in the next few days to remove white space.

Thanks again.

Richard

Not a problem, let us know if you are still having problems with the favicon after changing the web address to https:// in RapidWeaver’s settings and republishing.

Regarding the favicon image, I meant remove the space from the filename. For example you have/had it as WASHA logo.svg. It shouldn’t contain a space, so you’d want to rename the image filename as WASHA-logo.svg. Hope that makes sense.

Cheers.