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

Question

当您选择“添加到主屏幕”时，我并不十分熟悉为iOS（和Android）添加图标的代码，但我根据我读到的内容使用了以下内容：

    <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"/>  

代码似乎有效，但在我将其添加到我的主屏幕后，一段时间后，图标消失了，我留下了一个黑色方块代替图标？发生了什么？该网站是：http://www.redtypewriter.com/，如果你想看看，我使用的是自定义WordPress主题。

谢谢！

Answer 1

获得黑色图标有两个主要原因：

• 使用JPG图片（iOS更喜欢PNG）
• 将PNG与透明区域一起使用。 iOS用黑色填充透明区域。

在您的情况下，这是因为您的图片是JPG格式而不是PNG。

有了原始照片，我发现了三个问题：

• 黑色图标，正如您所描述的那样。
• 我的设备需要一些时间才能显示图标（例如，添加到主屏幕时）。在最初的几秒钟内，我只看到了默认图标。这不是那么不寻常，但我有点惊讶。
• 书签时，我的设备没有使用您的图标，而是另一个：

只要我将它们转换为PNG并相应地更改HTML代码，所有问题都会立即修复。

此外，you don't define enough pictures。例如，您的图标在Retina iPad上看起来不太好。