Clearly it isn't completely automatic, as many icons don't have a reflection, but is there some sort of checkbox when creating an app to determine whether the gloss is applied?

  • I've always wondered this, since they all like identical
    – henryaaron
    Mar 25 '12 at 1:29

Yes, it is automatically applied by iOS.

There is an option for iOS application developers to turn this off, called UIPrerenderedIcon. This is a value in the Applications Info.plist, that can be turned on and off (checking it would note that this is a pre-rendered icon, and to not apply the gloss).

You can read more details in the iOS Human Interface Guidelines.

Web Applications (as noted in Mathias's answer) also do have this reflection applied to them. You can override this by naming your file apple-touch-icon-precomposed.png. More information is also provided in the HIG for web clip icons.


jmlumpkin’s excellent answer is about native app icons. For the sake of completeness, it should be noted that there’s another type of “app” that can have home screen icons.

It’s a different story for web apps (which can also have touch icons when added to the home screen).

A web developer can add a touch icon to his website as follows:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

iOS then automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen (as it does with application icons). Specifically, iOS adds:

  • Rounded corners
  • Drop shadow
  • Reflective shine

As of iOS 2.0, you can prevent the addition of these effects by using the precomposed keyword:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

This is described in the Web Clip Icons section in the iOS HIG. There are some other gotchas that I documented in this write-up, but that’s the gist of it.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .