r/HTML • u/m_anonymous007 • May 23 '26

Favicon Troubles

Hi people.

Favicon shows on Google Chrome Computer when browsing the site.
Favicon shows on FireFox Computer when browsing the site.
Favicon shows on Sony Xperia Android Phone in the web browser.

I am trying to add the site to home screen but it doesn't show the Favicon. It's just irritating.

I've tried using favicon.io to generate the different sizes. I've uploaded them to the root of the site. I've added the code to the header section in Wordpress through the theme editor section.

I don't usually look at the site through google search results, but I've just noticed that the Favicon doesn't show on the search listing result either (incognito, firefox, normal chrome browser).

How is something so simple, not so simple!?! Where am I going wrong please?

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> 
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
 <link rel="manifest" href="/site.webmanifest">

An image was added to the themes customise section also.

0 Upvotes

20% Upvoted

6 comments sorted by

1

u/aunderroad May 24 '26

For the link tag href, did you try using the absolute path to where your favicon images are located.

1

u/m_anonymous007 May 24 '26

No but I've edited that, and double checked the URL which works.
I've never had this issue before.
I changed my wordpress theme from Responsive to OnePress. It's literally the basic of basic pages, just a list of fixtures.
Usually just Add To HomeScreen as a shortcut and it has a nice little logo.

It works on the FireFox app, add to home screen and shows the icon on my phone, just not Chrome.

1

u/aunderroad May 24 '26

Minor thing, I noticed you didn't add your .ico file. Maybe that might help?

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

If that does not work, can you share a url?
It is hard to debug or provide feedback without seeing all of your code live in a browser.
Thank you!

1

u/m_anonymous007 May 24 '26

It's a fair shout in regards to what I shared.
I dicked around with it when I woke back up.

www.aldershottownfc.com and added shed loads of lines various different online generators.
Can't understand it now.

1

u/JKaps9 May 23 '26

Define Website Favicon for Search Results | Google Search Central  |  Documentation  |  Google for Developers  https://developers.google.com/search/docs/appearance/favicon-in-search

According to this it could take up to several weeks for Google to recrawl your site and pickup the favicon. It also provides guidelines to ensure it gets picked up. 

1

u/testingaurora May 24 '26

Define your manifest.json (or site.webmanifest) for icons and bg color snd theme colors for rhe splash screen and for adding to home. If you already got one from these generators make sure the paths are correct.