iOS icon for Add to Home Screen turns black

Question

I'm not terribly familiar with the code to add icons for iOS (and Android) when you select "Add to Home Screen", but I used the following, based on what I read:

    <link rel="apple-touch-icon-precomposed" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/57.jpg"/>  
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/72.jpg"/>  
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/114.jpg"/>  

The code seems to work, but after I add it to my home screen, after some time, the icon disappears and I'm left with a black square in place of the icon? What's happening? The site is: http://www.redtypewriter.com/ if you want to take a look, and I am using a custom WordPress theme.

Thanks!

Babysit

Answer 1

There are two mains reasons to get black icons:

• Using JPG pictures (iOS prefers PNG)
• Using PNG with transparent regions. iOS fills transparent regions with black.

In your case, this is because your pictures are in JPG format instead of PNG.

With you original pictures, I observed three issues:

• The black icon, as you described it.
• It took some time for my device to show the icon (eg. when adding to the home screen). During the first few seconds, I only saw default icons. This is not that unusual, but I was a bit surprised.
• When bookmarking, my device didn't use your icons but another one:

As soon as I converted them to PNG and change the HTML code accordingly, all issues were fixed at once.

In addition, you don't define enough pictures. For example, your icon won't look great on a Retina iPad.

Zak

I have png files for my site, but it still shows up as black on the iPhone and iPad even though it's white. Any other ideas? – Phelia

Transparency produces such result: transparent areas are filled with black. realfavicongenerator.net/blog/apple-touch-icon-turns-black . Maybe this is the problem? – Zak

By using the apple-touch-icon-precomposed keys (as opposed to apple-touch-icon) plus removing the alpha channel from our PNGs, we managed to solve the problem. Thanks a lot! One way of removing the alpha channel is described here: #2323250 – Corticosterone