WebClip图标无法在主屏幕上工作

Question

我知道，这不是一种新技术，这个问题在不同的变化中被问过几次。 但他们（也不是谷歌搜索）都无法帮助我解决问题。

我正在使用以下链接：

<link rel="shortcut icon" type="image/x-icon" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon.ico" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon144.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon72.png" />
<link rel="apple-touch-icon-precomposed" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon57.png" />

这是一个WordPress主题，所以我不能简单地将图标放在Web根目录中。 图标实际上做的工作，例如，当我的网站添加到我的iPad的收藏，我可以看到美丽的视网膜图标。

但是，打“添加到主屏幕”，当它不工作，并显示一个黑色的图标，而不是：

Answer 1

当iOS无法找到合适的图标时，它会生成页面的缩影作为替代。 你的页面主要是黑暗的？ 如果是这样，那（部分）解释了黑色图标。

您的代码是正确的，但iOS7有两个不一致的地方，它们会改变规则：

• 尺寸发生了变化。 例如，自iOS7以来，72x72图片现在应该是76x76。 那么，iOS7可以应对旧的尺寸，所以这不是你观察到的解释。
• 预先合成的图片现已弃用。 不再支持apple-touch-icon-precomposed ，只支持apple-touch-icon 。 这可能解释了为什么您的图标在主屏幕上失败。

有关新尺寸，预期HTML代码等，请参阅Apple参考资料 。

为了创建合适的图片和HTML代码，您可以使用此favicon生成器 。 完全披露：我是本网站的作者。