Favicon not showing in Safari

Question

I've searched all over the internet already and I still don't know why the favicon wont show on safari, it shows ok on chrome and FF, I've tried these in the header:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

or this

<link rel="shortcut icon" href="favicon.ico?23189123" type="image/x-icon"/>

changed the favicon to 32 bits, or removed the WebpageIcons.db from safari library etc. and I check the website on browserstacks in case is my cache..

Is there anything else Im missing? please let me know any suggestions, thanks in advance.

Pentacle

Do a clean refresh. Your browser is in the cache! – Saleh

Also make sure fav icon image is there in correct path.. As C-link Nepal said, clear browser cache.. – Deliberative

I've checked the site on browserstack in case it's my cache, do you think browserstacks could be cached too? (im thinking it will refresh from time to time) The favicon is located in /site, so I'm sure the path is correct, also pointed the file in the header. – Pentacle

resave your favicon as an 8bit (256color) and re-upload to your site. This may help. – Contraband

Worked!, My computer was heavily cashed, not even removing the cache or using browserstacks / incognito view will let me see the favicon (all of them were cashed). So i used another pc and it was working fine in all browsers. Thanks everyone. – Pentacle

did you check this link? – Adina

Answer 1

Safari uses "apple-touch-icon" and not just "icon". Also, you will have to specify the icon for all Apple devices if you want it to show up in all of them.

Read more here https://css-tricks.com/favicon-quiz/

Chicalote

Answer 2

Use https://favicon.io/ and generate the html code snippet and file set using your image for favicon.

Gregory

Answer 3

I faced a similar problem where the favicon wasn't appearing in Safari during the development of a Next.js project on my Ubuntu machine. I discovered a solution that addressed this issue, outlined here for local development.

Moreover, to ensure the favicon displays correctly in live environments, such as staging or production, I had to make an additional configuration. I added the attribute crossorigin="use-credentials" as recommended in this guide.

Territorialism

Answer 4

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

Rollicking