The favicon for my website is broken on Safari (17.2.1) but works on all other browsers. This is how it looks like:
I have already tried to empty the cache from Safari directly & delete the whole favicon cache folder and restart Safari. Nothing seems to work.
Here is my folder of favicon images. I have checked they are accessible, i.e. I can go to website/favicon.ico and actually see the favicon.
Here is my meta data that is used in the html header:
<Head>
<title>Dataleap</title>
<meta charSet="utf-8" />
<meta name="application-name" content="Dataleap" />
<meta name="description" content="Market Research simplified" />
<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" />
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<script
dangerouslySetInnerHTML={{
__html: `
// We pre-filled your app ID in the widget URL: 'https://widget.intercom.io/widget/sx115hzn'
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/sx115hzn';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
`
}}
/>
</Head>
Do you know how to fix it or further debug the issue?