添加到主屏幕的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代码,所有问题都会立即修复.

此外,您没有定义足够的图片.例如,您的图标在Retina iPad上看起来不太好.