CODEWITHSUNDEEP
htmlmacossafarifavicon
captaincustard
captaincustard

Reputation: 361

How to create a favicon for Safari 14?

I am trying to create favicon for my website (it is not live yet.) Favicon shows on Chrome but not on Safari 14. I have the setting to see websites' favicon turned on. I also tried cleaning Safari's favicon cache. I am using an PNG photo. What shows on Safari is more like a dull/flat representation. Safari Chrome

I tried these websites:

  1. https://favicon.io
  2. https://www.favicon-generator.org
  3. https://realfavicongenerator.net

They all work on Chrome but not on Safari.

Upvotes: 7

Views: 11315

Answers (3)

Kolom
Kolom

Reputation: 297

After deleting the contents of the "Favicon Cache" folder, you may need to restart the Safari a couple of times until the contents of that folder created again, eg favicons.db etc.

Then it should open the new favicon. At least, that worked for me.

Upvotes: 1

captaincustard
captaincustard

Reputation: 361

I solved it. So, instead of deleting files in ~Library/Safari/Favicon Cache, I had to empty the entire Safari cache from Develop menu or using this keyboard shortcut ⌥⌘E

Upvotes: 5

Shubh Sharma
Shubh Sharma

Reputation: 43

You would need to have two links, <link rel="shortcut icon" type="image/png" href="yourfavicon.png"/> (for chrome) <link rel="apple-touch-icon" href="yourfavicon.png"> (safari)

Just place both tags in the <head> section of your HTML. Here's the link if you want to read more: https://css-tricks.com/favicon-quiz/

Upvotes: 2

Related Questions