0

我知道，这不是一项新技术，这个问题已经以不同的方式被问过几次。但是他们中的任何一个（也没有谷歌搜索）都不能帮助我解决我的问题。

我正在使用以下链接：

<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 收藏夹时，我可以看到漂亮的视网膜图标。

但是当点击“添加到主屏幕”时它不起作用并显示一个黑色图标：

在此处输入图像描述

4

1 回答 1

2

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

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

  • 尺寸发生了变化。例如，从 iOS7 开始，72x72 图片现在应该是 76x76。好吧，iOS7 可以应付旧的尺寸，所以这不是你观察到的解释。
  • 预先合成的图片现已弃用。没有更多apple-touch-icon-precomposed，仅apple-touch-icon支持。这可能解释了为什么您的图标在主屏幕上失败。

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

为了创建合适的图片和 HTML 代码，您可以使用这个favicon generator。全面披露：我是本网站的作者。

于 2014-03-05T09:00:11.027 回答