Menu
Are Apple touch icons bigger than 60x60 supported, and if so, what dimensions should I use for the iPad and iPhone?
727
Check out the Add an Apple touch icon to your Progressive Web App codelab to see how adding an Apple touch icon creates a more polished user experience. To provide a good user experience, make sure that: The icon is 180x180 pixels or 192x192 pixels.
Similar to the Favicon, the Apple touch icon or apple-touch-icon. png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen, this icon is used.
On Android devices, launcher icons are generally 96×96, 72×72, 48×48, or 36×36 pixels (depending on the device), however Android recommends your starting artboard size should be 864×864 pixels to allow for easier tweaking.
Updated list December 2019, iOS13 One icon for iOS 180x180 px and one for android 192x192 px (declared in site.webmanifest).
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> #### 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
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS --> <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png"> <!-- iPad and iPad mini @1x --> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 --> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <!-- iPad and iPad mini @2x --> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> <!-- iPad Pro --> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png"> <!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus --> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> <!-- Android Devices High Resolution --> <link rel="icon" sizes="192x192" href="icon-hd.png"> <!-- Android Devices Normal Resolution --> <link rel="icon" sizes="128x128" href="icon.png"> 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
<!-- Android Devices High Resolution --> <link rel="icon" sizes="192x192" href="icon-hd.png"> <!-- Android Devices High Resolution --> <link rel="icon" sizes="128x128" href="icon.png"> Update 2015 iOS 9: For iOS 9 and iPad pro
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png"> 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
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 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:
The other resolution are still the same
Source: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
