Retina Web Clip Icons and Reeder for iPad — Shawn Blanc


62 bookmarks. First posted by martinkenny march 2012.


how to setup retina web clip icons for your website - Shawn Blanc #reading http://t.co/ugXyrcbp
via:packrati.us  reading  from delicious
april 2012 by jamescampbell
favicon retina
march 2012 by briandrum
favicons, webdev
march 2012 by khittle
Need to get working on it http://t.co/RA3bmcC7 ✚ Retina Web Clip Icons and Reeder for iPad
twitter  user 
march 2012 by cielitoslindos
✚ Retina Web Clip Icons and Reeder for iPad, from Shawn Blanc http://shawnblanc.net
ifttt  googlereader 
march 2012 by chrisash
New: Retina Web Clip Icons and Reeder for iPad http://t.co/PR2A8c1K
from instapaper
march 2012 by beatbyter
A few days ago I updated this site’s Web clip icon to be 300×300 pixels.

It looks great in Reeder, and it looks good as a Home screen icon on new and old iPads and on the iPhone 4/4S.

There are two (yea, three) ways to upload your Web clip icon and make it discoverable:
icons  ipad  webclip  apple  ios  iphone 
march 2012 by Aetles
do this for your site when you learn how to design iconsor something
favicon  website  polish 
march 2012 by whlteXbread
from Shawn Blanc http://shawnblanc.net

Thanks to the new iPad’s Retina display, it’s possible that you need to update your website’s custom Web clip icon.

The icon size for the new iPad’s Home screen is 144×144 pixels. Up until last week my site’s Web clip icon was 158×158 pixels (Apple.com’s was, and still is 129×129). I’d been using 158 because of Nathan Borror’s suggestion from way back in 2008 — it was a size that seemed scaled well on both iPads and iPhones.

Even though 158 is still big enough so that a Web clip icon on the new iPad’s Home screen doesn’t get scaled up, it is not, however, big enough to fill the space allotted in the new Retina-version of Reeder for iPad.

Reeder for iPad uses an icon size of 241×241 pixels to display the images for individual feeds.

If you’ve got a Web clip icon linked-to within in your site’s header, or uploaded to your site’s root folder, then Reeder will find and use it. If it’s big enough then it will fill the space, if it’s not big enough then Reeder will center it and it will have a white border. If there is no Web clip icon at all, then Reeder will use your site’s favicon and that will be small and pixelated.

A few days ago I updated this site’s Web clip icon to be 300×300 pixels.

It looks great in Reeder, and it looks good as a Home screen icon on new and old iPads and on the iPhone 4/4S.

There are two (yea, three) ways to upload your Web clip icon and make it discoverable:

Upload a PNG file titled apple-touch-icon.png to your site’s root folder. So: http://example.com/apple-touch-icon.png

Upload a PNG (you can call it whatever you like) and reference it directly from within your site’s header code:

Or, if you don’t want iOS to automatically add that glossy half-circle effect to your icon, you can reference it as being precomposed:

You can read more about application icons and custom Web clip icons on Apple’s HIG pages here.
ifttt 
march 2012 by josephschmitt
Your site may need an updated Web clip icon:
from twitter_favs
march 2012 by danethomas
Thanks to the new iPad’s Retina display, it’s possible that you need to update your website’s custom Web clip icon.

The icon size for the new iPad’s Home screen is 144×144 pixels. Up until last week my site’s Web clip icon was 158×158 pixels (Apple.com’s was, and still is 129×129). I’d been using 158 because of Nathan Borror’s suggestion from way back in 2008 — it was a size that seemed scaled well on both iPads and iPhones.

Even though 158 is still big enough so that a Web clip icon on the new iPad’s Home screen doesn’t get scaled up, it is not, however, big enough to fill the space allotted in the new Retina-version of Reeder for iPad.

Reeder for iPad uses an icon size of 241×241 pixels to display the images for individual feeds.

If you’ve got a Web clip icon linked-to within in your site’s header, or uploaded to your site’s root folder, then Reeder will find and use it. If it’s big enough then it will fill the space, if it’s not big enough then Reeder will center it and it will have a white border. If there is no Web clip icon at all, then Reeder will use your site’s favicon and that will be small and pixelated.

A few days ago I updated this site’s Web clip icon to be 300×300 pixels.

It looks great in Reeder, and it looks good as a Home screen icon on new and old iPads and on the iPhone 4/4S.

There are two (yea, three) ways to upload your Web clip icon and make it discoverable:

Upload a PNG file titled apple-touch-icon.png to your site’s root folder. So: http://example.com/apple-touch-icon.png

Upload a PNG (you can call it whatever you like) and reference it directly from within your site’s header code:

<link rel="apple-touch-icon" href="http://example/apple-touch-icon.png" />

Or, if you don’t want iOS to automatically add that glossy half-circle effect to your icon, you can reference it as being precomposed:

<link rel="apple-touch-icon-precomposed" href="http://example/apple-touch-icon.png" />

You can read more about application icons and custom Web clip icons on Apple’s HIG pages here.
from google
march 2012 by martinkenny