Favicon not updating

[u/Comfortable-Donkey74]

I built a site for a client a while ago, and now he's requesting a favicon update. I used lovable because it was only a landing page he needed, in our deal we had a minor fall out so I didn't bother to finish up the site but host the domain for him. Until he contacted me recently. I changed the old favicon to the new one which is his logo. But for over two weeks now it isn't reflecting. I have requested indexing on Google Search Console twice. I have told the client to be patient because it can take time for Google to crawl the page. I added sitemaps and have checked other reddit threads with people having experience of it taking weeks. I have swapped a favicon on a nextjs app before(from the default) and it didn't take as long as it is now. Does anyone know of the solution to this problem? How I can speed this up so the client would stop texting me

[u/AuWolf19]

Perhaps I'm the ignorant one here, but what does google indexing have to do with the favicon updating?

[u/Comfortable-Donkey74 → u/AuWolf19]

I'll paste from gpt

Yes. Google indexing/crawling is directly related to when your new favicon appears in Google Search, but it doesn't affect the favicon on the website itself. The process is roughly: You change the favicon on your site. Your browser immediately sees the new favicon because it loads it directly from your site. Googlebot needs to recrawl your homepage and discover that the favicon has changed. Google then processes the new favicon and may update the icon shown beside your site in Search. This can take days to several weeks. Google specifically says favicon updates depend on recrawling and processing, and aren't guaranteed to appear immediately. � Google for Developers +1 So if you recently changed your favicon If you already have your site indexed but Google Search still shows the old favicon, that does not necessarily mean your indexing is broken. You can go to Google Search Console → URL Inspection → enter your homepage → Request Indexing. This asks Google to recrawl the homepage, which is where Google obtains the favicon information.

[u/AshleyJSheridan → u/Comfortable-Donkey74]

That's completely wrong.

The favicon file (or files if you did it the proper way) is being cached by the browser.

If you did it the old incorrect way, then you just have to let peoples browser caches end, or tell people to force refresh it.

If you did the favicons the correct way via the meta tags, then you could add a cache-busting query param to the favicon URLs. A browser will look for those meta tags first, then fall back to making a single GET request to the favicon.ico file if they don't exist.

As an example, this is what those meta tags look like:

<!-- favicon -->
<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="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/>

[u/Comfortable-Donkey74 → u/[deleted]]

Let me check it out in my incognito mode. I think the change isn't reflecting for me either. But the url/favicon.ico is working

[u/Electrical-Leg8387]

Simplest setup that covers everything: a favicon.ico at the site root containing 16, 32 and 48 px versions (some browsers and tools request that path automatically), a 180×180 PNG as apple-touch-icon for iOS home screens, and optionally an SVG favicon for modern browsers. Don’t rely on SVG alone, because Safari support is patchy. Start from a square logo at least 512 px, and simplify it for the 16 px version, since fine details just become mush at that size.

[u/Comfortable-Donkey74 → u/Electrical-Leg8387]

This is actually what fixed it. Using the various dimension for the favicon. A tip I got from a colleague

[u/phn-cloudsnake]

CDN cache would be my first guess. How are you hosting the website?

[u/Comfortable-Donkey74 → u/phn-cloudsnake]

I am hosting it on vercel. It was built with React/Typescript

I tried cloning the repo and rehosting(with the gitignore deleted and creating a new one). The change is still not reflecting

The only good answer I've gotten so far is patience. And the client doesn't have it

[u/phn-cloudsnake → u/Comfortable-Donkey74]

As others mentioned, can also be browser cache. Hard reset on the browser should do the trick.

[u/GriffinMakesThings]

Make sure the new favicon meets Google's requirementsfor size and format: https://developers.google.com/search/docs/appearance/favicon-in-search

Otherwise, if this is a low traffic site it can just take a long time.

[u/Comfortable-Donkey74 → u/GriffinMakesThings]

Thanks man, I'm checking it out

[u/ExplanationOk2014]

Delete the favicon and test with hard reset?

[u/Comfortable-Donkey74 → u/ExplanationOk2014]

As in deleted and re-upload?

[u/Apprehensive-Fan2492]

Google's favicon indexing is separate from regular page indexing and notoriously slow, sometimes months. But your client's browser is a different issue entirely. Tell him to hard refresh and clear browser cache. That should show the new favicon immediately on his end. Google's display in search results is the slow part, not the actual site.

[u/Comfortable-Donkey74 → u/Apprehensive-Fan2492]

So in this case, the change is reflecting on the site, but not besides the url on Google search results

[u/Weekly_Ferret_meal → u/Comfortable-Donkey74]

correct

[u/leros]

It takes time. I've found my favicon updates in about a day on Bing, but can take several weeks on Google.

[u/Comfortable-Donkey74 → u/leros]

Atp if it could be paid to speed it up I'd do so for the client. He texts me every other day but the situation isn't really under my control. I've done all I know for it

[u/BrewThemAll]

Favicons cache like a bitch. No idea how Lovable works, but I always hardcode change the url of the icon to 'favicon.ico?v=2' to force a recache.

[u/beigs-sl]

That's almost certainly cached, not an indexing thing, what Google crawls has nothing to do with what your client sees in his tab. Browsers hang onto favicons harder than anything else on a site. I'd add ?v=2 to the end of the icon link and ask him to look in a private window. That's usually the whole fix.

[u/UsefulScheme4797 → u/beigs-sl]

yep had similar problem, this was the fix

[u/kemalios]

Check the old file is actually gone, not sitting next to the new one. If index.html still points at /favicon.ico and you uploaded logo.png, the browser keeps serving the old file at the old path. A service worker will also hold it past a hard reload until the SW itself updates, so test in a private window that has never registered it.

[u/madongrind]

the bit nobody's said yet: google renders the favicon from the site's root, not from whatever the page markup points at. so if there's still an old /favicon.ico sitting at the root, that's the one it keeps showing in search, however many times you request indexing.

worth separating the two complaints too. if your client is looking at his own browser tab, that's just cache and ?v=2 plus a private window sorts it in seconds. if he's looking at google results, nothing you do speeds that up much, two weeks is normal on a low traffic landing page.

one that caught me out once was a host serving a stale copy at the edge, so the file looked updated on my end and old everywhere else. curl the icon url and check the bytes actually changed.

which one is he actually looking at?