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

时间:2014-03-04 18:28:22

标签: wordpress ios7 safari favicon apple-touch-icon

我知道,这不是一种新技术,这个问题在不同的版本中被问过几次。但他们(也不是谷歌搜索)都无法帮助我解决问题。

我正在使用以下链接:

<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主题,所以我不能简单地将图标放在网络根目录中。实际上的图标有效,例如当我将网站添加到我的iPad上时,我可以看到美丽的视网膜图标。

但是当点击“添加到主屏幕”时,工作并显示黑色图标:

enter image description here

1 个答案:

答案 0 :(得分:2)

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

您的代码是正确的,但有两个关于iOS7的差异,这会改变规则:

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

有关新尺寸,预期HTML代码等的信息,请参阅Apple references

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