添加到主屏幕的iOS图标变黑

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!

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.