Search code examples
htmlcsssafarifavicon

Favicon not showing up on Safari browser even with cleared cache


I'm fairly new to html and I've noticed that the favicon that I want to display on my site is not showing up on Safari but showing up on Google Chrome. I was wondering if I could get any help on this?

I know this is a pretty basic question, but I have tried all the basic stuff like emptying my Safari's browser cache as well as the favicon cache on my mac. Here is the syntax I used to link the png. I enclosed this under the <head> </head> section of my code.

<link rel="shortcut icon" type="image/png" href="../MP1/images/icon.png"/> <link rel="apple-touch-icon" type="image/png" href="../MP1/images/icon.png">

I've tried both standard favicon sizes 16x16 and 32x32 px but neither show up on my Safari browser. Thank you in advanced for the help!


Solution

  • 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.

    Refer this article : https://css-tricks.com/favicon-quiz/