Default favicon displayed in Safari after been changed

[santiagoejm]

Hi community,

I have a small enoying thing that only occurs in Safari, and is that I have updated in my docusaurus.config.js file the path to a custom image to be use as the favicon, specifically to a SVG file; this image is displayed correctly in the navigation tabs in multiple browsers (Chrome, Brave, Mozilla...), but not in Safari where the default Docusaurus logo is still displayed.

This happens both locally in development mode as well as in production. Any idea why this might happen exclusively in Safari?

Cheers

[slorber]

Can you create a repro that we can look at and see the problem ourselves in Safari?

[santiagoejm]

Hi @slorber, thanks for your quick response, I am authorised to provide you with the main repository and the live page, cheers!

[slorber]

SVG favicons are not widely supported: https://caniuse.com/link-icon-svg

If you choose to use a SVG for the favicon, the problem is outside the scope of Docusaurus, you'd rather use an .ico like everyone

[pranabdas]

Could you try deleting favicon.ico (or renaming if it is used somewhere) from static/img/? I think in some cases browser fetches favicon.ico from the website root directory if present. It may not be even necessary to provide favicon link in the html head if favicon.ico exists in the root (example: https://www.apple.com).

Edit: I realise that in your case favicon.ico goes under /img (not root) in the build. The problem could be Safari does not support svg favicon - https://css-tricks.com/favicons-how-to-make-sure-browsers-only-download-the-svg-version/ Probably it shows cached favicon for you, I do not see any favicon image in your website using Safari, I see generic letter E as icon.

[santiagoejm]

Hi @pranabdas thanks a lot for your input, the cached favicon would be the reasonable explanation, even before I opened the discussion I've tried with different img formats as well, just to get the same result as now.

Now that you mentioned, some of my colleagues also see the generic E as icon in their Safaris.

So the case could be that I am in some kind of loop where even after changing the favicon img format, I only see the cached original one, and in the case of those who get the generic E is explained by the inability of Safari to display SVGs as favicon. But it is also possible even in production for people who has never opened the page before?

[pranabdas]

Hi @santiagoejm, people who do not have cached old favicon file, should straightway see new favicon as long as there is a compatible type available. So you should use a compatible type say PNG or ICO format to show up in Safari. For the local development you can try deleting cache from your browser. Also you can try: open browser developer console → go to Network tab → Select disable caches. Reload the page and check it is downloading the new/correct favicon.

[santiagoejm]

@pranabdas it works like a charm, thanks a lot!

[chucrutes]

For me, i had to go to the tab of my website in localhost, the click in Safari in the bar, click settings for localhost and disable content blockers

[geohei]

Same problem here.

• Content blockers disabled (Safari)
• Private windows (Safari)
• Web Inspector > Network > Disable Caches (Safari)
• Caches cleared (Win10/Firefox & Safari)
• localhost:3000 and remote server
  Nothing worked. Still the Docusaurus favicon.ico!
  What is completely crazy is, that the img/favicon.ico (/src/img and /build) both show my favicon.ico (48x48), but all browsers show the Docusaurus favicon. Even if my favicon.ico has a wrong format or size (which it hasn't), I have no clue where the Docusaurus favicon comes from since not anymore in any directory!
  Running out of ideas ...

... later ...

Disable Caches on Win10/Firefox worked now (w/ the remote site).
On Safari, it didn't !!??
Never seen this before!