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.

Interdictory

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.

Interdictory

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"

Gathering

Answer 3

Transparent Apple Touch Icons are indeed possible. What you need to do is strip all excess information from the PNG using ImageOptim for Mac https://imageoptim.com/mac or a similar program on windows. I did extensive research and stumbled on the answer by looking at the apple touch icon used by the Virtual DJ site. This icon keeps it's transparent background on iOS and MacOS Sierra. I looked at the file size and realized how small it was compared to the custom apple touch icons with transparency that I made for my favorites in Safari. Next I looked at the file information using the inspector in Mac's Preview app. All of my custom apple touch icons had four tabs in the inspector section named General, exif, PNG and TIFF. The virtual DJ icon only had two tabs named PNG and General. Once I ran my custom images through ImageOptim the file sizes plummeted by over 90% and the extra TIFF and exif tabs disappeared from the inspector in Preview. Sure enough once I reloaded my custom images and launched Safari all of my Favorites tabs have transparent backgrounds!!!! Please see attached image for proof. Transparent Apple-Touch-Icons

Greenwald

Please do not post identical answers on different questions. With a bit more rep, you will be able to flag duplicate questions. If the question is not a duplicate, tailor the answer to this specific question. – Hasa

Sorry about that I'm a bit of a newbie and was so excited upon finding a solution I wanted to share the answer with anyone who asked. I'll keep your suggestion in mind for future posts:-) – Greenwald