Question
I have created my favicon in various sizes. It looks great in the address bar on my Retina MacBook Pro, but the favicon in the Safari Reading List is pixelated. I was under the impression it uses a 32px version, but on a Retina display that would be 64px. My favicon contains that resolution, yet the icon is still blurry.
What is the proper way to create and link this favicon to look great on Retina?
https://stackoverflow.com/questions/20790504
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<link rel="apple-touch-icon-precomposed" sizes="152x152" href="images/favicon-152.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/favicon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="images/favicon-120.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/favicon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/favicon-72.png">
<link rel="apple-touch-icon-precomposed" href="images/favicon-57.png">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/favicon.ico">
Solution
I believe this is a bug in Safari 7, hasn't been addressed in Safari 7.1.
Safari 8 does not (as of the current public beta release) display favicons for sites added to the Reading List. Instead if there's an image on that site it'll display that it seems.
However, Safari 8 does show icons in Favorites and Frequently Visited. But not the favicon, instead it shows the Apple Touch icons, and it selects the proper size as expected for Retina displays.
OTHER TIPS
Update from 2022: reading list's icon is taken not from favicons but from open graph og:image node.
