How to get iOS to properly respect the "apple-touch-icon-precomposed" link attribute for a "web app"

Question

I have created several web apps for iOS that employ the apple-touch-icon-precomposed link attribute method for custom home screen icons without the gloss. However, I have run into an issue recently, where, after adding the home screen bookmark and then running the app and exiting the app (via multitasking), gloss is applied to the icon! I don't understand why this happens. I can't reproduce it on an iPad 2, but this keeps happening on my iPhone 3GS running 4.3.3. Also, it seems that it might have something to do with putting it in a folder?

The app is located at http://pattern86.com/apps/color if you'd like to inspect the code.

Basically this is what happens:

1. Add the app to the home screen. (No gloss--everything's good at this point.)

2. Quit the app from multitasking (It already shows the gloss here!)

3. Now the icon has the gloss effect! What gives?

Administer

Not sure what’s causing the problem on 4.x, but if it’s any consolation, 5 appears to behave correctly here. – Disturbance

Thanks—that's good to hear! I am asking because other web apps which appear to have the same code (even some of mine) behave correctly, but this one just doesn't for some reason! – Administer

Have you tried rebooting the device? – Mer

Could be something to do with the icon itself. Does the image have an alpha channel? Do your other, working, apps’? – Disturbance

@WTP yes @Noah That's a really good question. They are all PNGs with RGB and an alpha channel, but that's the only one that actually has 0 alpha pixels in it. Is that a problem? I've never read that in any of the developer documentation or anywhere else for that matter. Can you reproduce what I'm talking about? – Administer

@Noah I've done some testing, and that's the culprit: using a PNG with visible visible transparency. Using a PNG with an alpha channel but no transparency is fine. Please repost your comment as an answer so I can award you! This is what happens when using a PNG with transparency: Adding it to the home screen is fine. Then viewing multitasking shows gloss on the icon, but even after closing the app, the home screen icon is still ok. After moving the web app into a folder and repeating the process, the home screen icon gets gloss. Can anyone reproduce this? I am able to in the iOS Simulator.app. – Administer

Answer 1

(reposting as an answer, as requested:)

Could be something to do with the icon itself. Does the image have an alpha channel? Do your other, working, apps’?

Disturbance

Reading the answer without reading the comments isn't very helpful, I believe you could include or replace the answer with the real solution: "Using a PNG with an alpha channel but no transparency is fine." – Responsiveness