phonydev.com

Apple touch icon

• posted on: February 3, 2009
• filed under: icon,pixels

• An iPhone user can add your site to their home screen (and why wouldn’t they, such a nice site! ). This is done by:

  1. visiting your page
  2. tapping the + icon
  3. selecting “Add to Home Screen”

  When this happens, the iPhone needs to figure out an icon to use for the home screen. It proceeds like this:

  1. Is there a <link rel="apple-touch-icon" href="..."> tag in the head of your page? If so, the image referenced in the href attribute is used. If not?
  2. Is there in the root of your web server a file called /apple-touch-icon.png. If so, it becomes the icon. If not?
  3. A screenshot of your page is used (scrolled at whatever position it is scrolled at the moment).

  In all of the cases, the icon is beautified for free by the use of a gloss and rounded corners. It’s also resized to fit the dimensions of an icon.

  So what can you do to better represent your site on the user’s home? Well, just make sure you have a 57×57 pixel icon and then you:

  • either put it in the root of the server, name it apple-touch-icon.png and forget it, or
  • name it whetever you want and put it anywhere, including another server or a CDN (Content Delivery Network) for performance purposes. But make sure you refer to the image from your <link rel="apple-touch-icon".. tag

  I see some sites do both – name the file apple-touch-icon.png, put it in the root and also add a link tag referring to the file. But that’s overdoing it a little.

  If you don’t like the default rounded gloss the iPhone uses to beautify your icon and you think you can do better, you have the option to do so by using the filename
  apple-touch-icon-precomposed.png

  Some examples in the wild:

  • Yahoo! front page
  • Yahoo! search for the iPhone
  • Facebook for iPhone
  • WordPress
  • Apple – they use a bigger 129×129 pixels icon for whatever reason, after all it’s their specs that say 57×57

  3 Comments

  1. Pingback by phonydev.com » iPhone-like glossy icons — Feb 3, 2009

     [...] If you want to provide close-to-native iPhone experience in your pages, how about using shiny glossy icons, just like those used on the home screen. [...]

  2. Comment by Scott — Apr 29, 2009

     When using the link rel=”apple-touch-icon” method, if the file pointed to is named apple-touch-icon-precomposed.png it will still have gloss affect. To fix this you can use – link rel=”apple-touch-icon-precomposed” which will stop the iPhone from adding the gloss effect.

  3. Pingback by GuruGuide: Add a custom icon to your website or blog for iPhone home screen bookmarking | The iPhone Guru — Jul 12, 2009

     [...] to [PhonyDev] Share and [...]

  Leave a comment

  Name *

  Mail *
  (not published)

  Website

  Tweet