10

Why do people (h5bp, Mathias Bynens) say to use a <link rel="apple-touch-icon-precomposed"> element? Apple's documentation on this makes no mention of apple-touch-icon-precomposed as a value for the rel attribute.


Apple's docs say this about precomposed icons:

Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix.


So it seems that we could reference the precomposed apple touch icon like this, right?:

<link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png">
Web_Designer
  • 72,308
  • 93
  • 206
  • 262
  • 1
    In the old (pre-iOS 7) days, precomposed meant that you didn't want iOS to add the icon gloss to your icon, either because you "precomposed" the icon with the gloss, or you don't want the gloss flat out. – Cole Tobin Feb 02 '14 at 02:36

2 Answers2

5

This direct quote from the write-up on touch icons you linked to explains it:

As of iOS 7, no special effects are applied to touch icons anymore, so if you only care about iOS 7 and up you don’t have to use precomposed anymore.

In other words, it’s recommended for optimal display of your touch icons on older iOS versions. Feel free to not use it.

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
  • I get the fact that IOS7 doesn't add special effects to icons, so if you don't mind older IOS versions not adding effects either, you can rename `apple-touch-icon-precomposed.png` to `apple-touch-icon.png`. My question was why people ever used `apple-touch-icon-precomposed` as a value for the `rel` attribute. Apple's documentation never mentioned that as a value. Here's [an older 2011 version of that doc](http://bit.ly/19OPHat). – Web_Designer Jan 07 '14 at 06:58
  • “so if you don't mind older IOS versions not adding effects either, you can rename `apple-touch-icon-precomposed.png` to `apple-touch-icon.png`” → This doesn’t make sense. Omitting `-precomposed` means that older iOS versions *will* add the effects. – Mathias Bynens Jan 07 '14 at 09:37
  • People used `rel=apple-touch-icon-precomposed` rather than `rel=apple-touch-icon` because it had the same effect as making an image available at `/apple-touch-icon-precomposed.png` rather than `/apple-touch-icon.png`. – Mathias Bynens Jan 07 '14 at 09:38
2

My own testing of iOS 6 on an iPad 3 made it seem as though the rel value was necessary when the filename used wasn't apple-touch-icon-*.

Adding -precomposed to an irregular filename (e.g. app-icon76x76.png) had no effect, whereas adding rel="apple-touch-icon-precomposed" removed the effects as expected.

breams
  • 86
  • 1
  • 4