2

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?

<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">
Jordan H
  • 52,571
  • 37
  • 201
  • 351
  • I don't know how Safari behaves with favicon.ico. Did you consider adding PNG favicon, such as "" ? – philippe_b Mar 21 '14 at 18:29
  • That results in the same appearance. It seems that Apple is downsizing it to 32x32 then upscaling that on Retina to 64x64. Even when my only favicon was 128x128, the graphic in the URL bar looked better than the one in Reading List. I'll report this info to Apple. – Jordan H Mar 23 '14 at 06:32

2 Answers2

0

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.

Jordan H
  • 52,571
  • 37
  • 201
  • 351
0

Update from 2022: reading list's icon is taken not from favicons but from open graph og:image node.

Kshatra
  • 369
  • 1
  • 4
  • 12