What size should apple-touch-icon png be for iPad and iPhone

Question

Are Apple touch icons bigger than 60x60 supported  and if so  what dimensions should I use for the iPad and iPhone

User · Answer

I think this question is about web icons. I've tried giving an icon at 512x512, and on the iPhone 4 simulator it looks great (in the preview) however, when added to the home-screen it's badly pixelated.

On the good side, if you use a larger icon on the iPad (still with my 512x512 test) it does seem to come out in better quality on the iPad. Hopefully the iPhone 4 rendering is a bug.

I've opened a bug about this on radar.

EDIT:

I'm currently using a 114x114 icon in hopes that it'll look good on the iPhone 4 when it is released. If the iPhone 4 still has a bug when it comes out, I'm going to optimize the icon for the iPad (crisp and no resize at 72x72), and then let it scale down for old iPhones.

User · Answer

For iPhone and iPod touch  create icons that measure       57 X 57 pixels     114 X 114 pixels  high resolution  2X    For iPad  create an icon that measures       72 x 72 pixels     144 X 144 pixels  high resolution  2X

User · Answer

With the iPad  3rd generation  there are now four icon sizes 57x57  72x72  114x114  144x144   Because retina icons are exactly double the size of the standard icons we really only need to make 2 icons  114 x 114 and 144 x 144  By setting the retina sized icon to the corresponding standard icon iOS will scale them accordingly    lt  -- Standard iPhone -- gt    lt link rel  apple-touch-icon  sizes  57x57  href  touch-icon-iphone-114 png    gt   lt  -- Retina iPhone -- gt    lt link rel  apple-touch-icon  sizes  114x114  href  touch-icon-iphone-114 png    gt   lt  -- Standard iPad -- gt    lt link rel  apple-touch-icon  sizes  72x72  href  touch-icon-ipad-144 png    gt   lt  -- Retina iPad -- gt    lt link rel  apple-touch-icon  sizes  144x144  href  touch-icon-ipad-144 png    gt

User · Answer

Updated list December 2019  iOS13 One icon for iOS 180x180 px and one for android 192x192 px  declared in site webmanifest     lt link rel  apple-touch-icon  sizes  180x180  href   apple-touch-icon png  gt   lt link rel  manifest  href   site webmanifest  gt         site webmanifest        name            short name            icons                            src     android-chrome-192x192 png                sizes    192x192                type    image png                        display    standalone      Deprecated list October 2017  iOS11  List for iPhone and iPad with and without retina   lt  -- iPhone first generation or 2G   iPhone 3G  iPhone 3GS -- gt   lt link rel  apple-touch-icon  sizes  57x57  href  touch-icon-iphone png  gt   lt  -- iPad and iPad mini  1x -- gt   lt link rel  apple-touch-icon  sizes  76x76  href  touch-icon-ipad png  gt   lt  -- iPhone 4  iPhone 4s  iPhone 5  iPhone 5c  iPhone 5s  iPhone 6  iPhone 6s  iPhone 7  iPhone 7s  iPhone8 -- gt   lt link rel  apple-touch-icon  sizes  120x120  href  touch-icon-iphone-retina png  gt   lt  -- iPad and iPad mini  2x -- gt   lt link rel  apple-touch-icon  sizes  152x152  href  touch-icon-ipad-retina png  gt   lt  -- iPad Pro -- gt   lt link rel  apple-touch-icon  sizes  167x167  href  touch-icon-ipad-pro png  gt   lt  -- iPhone X  iPhone 8 Plus  iPhone 7 Plus  iPhone 6s Plus  iPhone 6 Plus -- gt   lt link rel  apple-touch-icon  sizes  180x180  href  touch-icon-iphone-6-plus png  gt   lt  -- Android Devices High Resolution -- gt   lt link rel  icon  sizes  192x192  href  icon-hd png  gt   lt  -- Android Devices Normal Resolution -- gt   lt link rel  icon  sizes  128x128  href  icon png  gt    Update Oct 2017 iOS 11  iOS 11 checked  iPhone X and iPhone 8 introduced  Update Nov 2016 iOS 10  New iOS version iPhone 7 and iPhone 7plus introduced  they have the same display resolution  dpi  etc as iPhone 6s and iPhone 7plus  until now no changes found respecting the update 2015  Update Mid 2016 Android  Add Android Devices to the list as the apple-touch links are marked as deprecated by Google and will be not supported anytime for their devices   lt  -- Android Devices High Resolution -- gt   lt link rel  icon  sizes  192x192  href  icon-hd png  gt   lt  -- Android Devices High Resolution -- gt   lt link rel  icon  sizes  128x128  href  icon png  gt    Update 2015 iOS 9  For iOS 9 and iPad pro   lt link rel  apple-touch-icon  sizes  167x167  href  touch-icon-ipad-pro png  gt    The new iPhones  6s and 6s Plus  are using the same sizes as the iPhone 6 and 6 Plus   the new iPad pro uses an image of size 167x167 px  the other resolutions are still the same    Update 2014 iOS 8   For iOS 8 and iPhone 6 plus   lt link rel  apple-touch-icon  sizes  180x180  href  touch-icon-iphone-6-plus png  gt     Iphone 6 uses the same 120 x 120 px image as iphone 4 and 5 the rest is the same as for iOS 7  Update 2013 iOS7    For iOS 7 the recommended resolutions changed    for iPhone Retina from 114 x 114 px to 120 x 120 px for iPad Retina from 144 x 144 px to 152 x 152 px   The other resolution are still the same    57 x 57 px default 76 x 76 px for iPads without retina   Source   https   developer apple com ios human-interface-guidelines icons-and-images app-icon

User · Answer

Yes  bigger than 60x60 are supported  For simplicity  create icons of these 4 sizes    1  60x60   lt   default 2  76x76 3  120x120 4  152x152   Now  it s preferable to add them as links in your HTML as    lt link rel  apple-touch-icon  href  touch-icon-iphone png  gt   lt link rel  apple-touch-icon  sizes  76x76  href  touch-icon-ipad png  gt   lt link rel  apple-touch-icon  sizes  120x120  href  touch-icon-iphone-retina png  gt   lt link rel  apple-touch-icon  sizes  152x152  href  touch-icon-ipad-retina png  gt    You can choose to not declare the 4 links above but just declare a single link  in which case give the highest size of 152x152 or even a size higher than that  say 196x196  It will always trim down the size for re-purposing  Ensure you mention the size   You can also choose not to declare even a single link  Apple mentions that in this scenario  it will lookup the server root first for the size immediately higher that the size it wants  naming format  apple-touch-icon- lt size gt  png   and if that s not found then it will next look for the default file  apple-touch-icon png  It s preferable that you define the link s  as that will minimize the browser querying your server    Icon necessities   - use PNG  avoid interlaced - use 24-bit PNG - not necessary to use web-safe colors   In versions older than iOS 7  if you don t want it to add effects to your icons  then just add the suffix -precomposed png to the file name   iOS 7 doesn t add effects even without it

User · Answer

The icon on Apple s site is 152x152 pixels  http   www apple com apple-touch-icon png  Hope that answers your question

User · Answer

The relevant documentation on Apple s site  Specifying a Webpage Icon for Web Clip   There is no need to put anything in the head of your document  If no icons are specified using a link element  the website root directory is searched for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix    For example  if the appropriate icon size for the device is 57 x 57  the system searches for filenames in the following order    apple-touch-icon-57x57-precomposed png apple-touch-icon-57x57 png apple-touch-icon-precomposed png apple-touch-icon png

User · Answer

Use these sizes 57x57  72x72  114x114  144x144 then do this in the head of your document    lt link rel  apple-touch-icon  href  apple-touch-icon-iphone png    gt   lt link rel  apple-touch-icon  sizes  72x72  href  apple-touch-icon-ipad png    gt   lt link rel  apple-touch-icon  sizes  114x114  href  apple-touch-icon-iphone4 png    gt            This will look good on all apple devices

User · Answer

Yes  If the size does not match  the system will rescale it  But it s better to make 2 versions of the icons    iPad     72x72  iPhone   4      114x114  iPhone  3GS     57x57     If possible    You could differentiate iPad and iPhone by the user agent on your server  If you don t want to write script on server  you could also change the icon with Javascript by   lt link ref  apple-touch-icon  href  iPhone version png    gt       if      iPad test             link rel  apple-touch-icon     href    iPad version png      assuming jQuery     This works because the icon is queried only when you add the web clip    There s no public way to differentiate iPhone  4 from iPhone  3GS in Javascript yet

User · Answer

I have been developing and designing iOS apps for a while and This is the best iOS design cheat sheet out there   have fun        Update  For iOS 8   and the new devices  iPhone 6  6 Plus  iPad Air  see this updated link   Meta update  Iphone 6s 6s Plus have the same resolutions as iPhone 6 6 Plus respectively  This is an image from the new version of the article

User · Answer

TL DR  use one PNG icon at 180 x 180 px   150 ppi and then link to it like this     lt link rel  apple-touch-icon  href  path to apple-touch-icon png  gt    Details on the Approach  As of 2020-04  the canonical response from Apple is reflected in their documentation on iOS    Officially  the spec says    iPhone   180px    180px  60pt    60pt  3x  iPhone   120px    120px  60pt    60pt  2x  iPad Pro 167px    167px  83 5pt    83 5pt  2x  iPad  iPad mini  152px    152px  76pt    76pt  2x    In reality  these sizing differences are tiny  so the performance savings will really only matter on very high traffic sites   For lower traffic sites  I typically use one PNG icon at 180 x 180 px   150 ppi and get very good results on all devices  even the plus sized ones

[iphone] What size should apple-touch-icon.png be for iPad and iPhone?

Examples related to iphone

Examples related to ipad

Examples related to icons