Skip to main content

Home/ Design for mobile/ Group items tagged mobile first

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

Everything you always wanted to know about touch icons · Mathias Bynens - 0 views

mathiasbynens.be/...touch-icons

mobile touch icons ios apple iphone webdesign html

shared by Vernon Fowler on 03 Jun 13 - No Cached
  • Say adiós to the boatload of proprietary <link rel="apple-touch-icon"> elements on every single HTML page.
  • Just create different versions of the icon, use the correct file names and place them in the root.
  • So, what do we need? apple-touch-icon-57x57-precomposed.png or apple-touch-icon-57x57.png for non-Retina iPhone and iPod Touch; apple-touch-icon-72x72-precomposed.png or apple-touch-icon-72x72.png for the first- and second-generation iPad; apple-touch-icon-114x114-precomposed.png or apple-touch-icon-114x114.png for iPhone 4+ (with Retina Display); apple-touch-icon-144x144-precomposed.png or apple-touch-icon-144x144.png for iPad 3+ (with Retina Display); apple-touch-icon-precomposed.png and apple-touch-icon.png as a fallback for everything else (possibly including non-Apple devices).
  • ...5 more annotations...
  • It’s a good idea to include both apple-touch-icon.png and apple-touch-icon-precomposed.png for maximum compatibility: iOS 1 and BlackBerry OS6 don’t support precomposed icons. (Note that Android 2.1 only supports precomposed icons.)
  • Sadly, the no-HTML approach doesn’t work on the native Android browser (tested in 2.3 Gingerbread, 3 Honeycomb, 4.1 Jelly Bean), although I’ve had reports saying it does work in and 4.2 Jelly Bean’s default browser.
  • For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead. Android has a default icon, and some systems fall back to the favicon if it’s available.
  • I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.
  • This way, older iOS versions download the smallest icon instead of the largest one. So, instead of forcing the largest icon to all devices unless they support the sizes attribute (iOS 4.2+), we now serve the smallest icon unless @sizes is supported. In other words, we’re now using progressive enhancement instead of graceful degradation :) When in doubt, always use this snippet. With support for nearly all iOS versions and devices, and as many different Android versions as possible, it’s the most robust way to add touch icons to your site.
1 - 5 of 5
Showing 20▼ items per page