Apple Touch Icon Turns Black

Question

The white background in my apple touch icon turns black?? My white background isn't transparent. The icon has a white triangle, red circle and black text. The only thing I can make out is the white triangle and red circle. Any idea whats causing this and how to make the icon keep its white background? Much appreciated.

Answer 1

I'm not sure exactly what it was, but I may have narrowed it down. The first time I uploaded the images they may have had the transparent background. The second time I uploaded them I added the white background, but the png save for devices setting still had transparency checked. The third time I uploaded them I saved them without the transparency checked but still got the black background. All along I think the iOS Safari browser had the first set of images stored in cache. After clearing the cache the new image showed up with no problem.

Edit: Its the transparent background that turns it black.

Answer 2

As gstricklind found, if your png has alpha channel transparency, iOS will unfortunately ignore any "precomposed" directive and apply all its usual effects, in adddition to giving your icon a black background (white didn't seem like a better choice??).

The solution is, of course, to precompile the icons with no transparency. This makes it pretty difficult to utilize Android's support of alpha channels while offering itouch icons as well if a black background does not work for you. I found this tool useful when composing: http://www.gieson.com/Library/projects/utilities/icon_slayer

Same issue seen here: How to get iOS to properly respect the "apple-touch-icon-precomposed" link attribute for a "web app"