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主题。

谢谢！

- amglori

Answer 1

有两个主要原因可以得到黑色图标：

• 使用JPG图片（iOS更喜欢PNG）
• 使用具有透明区域的PNG。iOS会用黑色填充透明区域。

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

通过原始图片观察到了三个问题：

• 正如您所描述的那样，出现黑色图标。
• 设备显示图标需要一些时间（例如将其添加到主屏幕时）。在前几秒钟内，我只看到默认图标。虽然这并不罕见，但让我感到有点惊讶。
• 当收藏夹时，我的设备没有使用您的图标而是使用另一个图标：

当我将它们转换为PNG并相应地更改HTML代码时，所有问题都立即解决了。

此外，

- philippe_b

---

我有网站的PNG文件，但在iPhone和iPad上它仍然显示为黑色，尽管它是白色的。还有其他想法吗？ - shim

透明度会产生这样的结果：透明区域会被填充为黑色。http://realfavicongenerator.net/blog/apple-touch-icon-turns-black/ 。也许这就是问题所在？ - philippe_b

是的，那就是问题所在。 - shim

通过使用 apple-touch-icon-precomposed 键（而不是 apple-touch-icon）并从我们的 PNG 中删除 alpha 通道，我们成功解决了问题。非常感谢！一种去除 alpha 通道的方法可以在此处找到：https://dev59.com/1HE95IYBdhLWcg3wadKq - dimitarvp