WebClip 图标在主屏幕上不起作用

Posted

技术标签:

【中文标题】WebClip 图标在主屏幕上不起作用【英文标题】:WebClip icon not working on home screen 【发布时间】:2014-03-04 18:28:22 【问题描述】:

我知道,这不是一种新技术,而且这个问题已经被问过几次了。但是他们中没有一个(也没有谷歌搜索)可以帮助我解决我的问题。

我正在使用以下链接:

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

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

【问题讨论】:

【参考方案1】:

ios 找不到合适的图标时,它会生成一个页面的缩影作为替换。你的页面主要是黑暗的吗?如果是这样,那(部分)解释了黑色图标。

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

大小已更改。例如,从 iOS7 开始,72x72 图片现在应该是 76x76。好吧,iOS7 可以应付旧的尺寸,所以这不是你观察到的解释。 现在不推荐使用预先合成的图片。不再支持apple-touch-icon-precomposed,仅支持apple-touch-icon。这可能解释了您的图标在主屏幕上失败的原因。

请参阅Apple references 了解新尺寸、预期的 html 代码等。

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

【讨论】:

伟大的发电机,谢谢!我仍然不知道我的图标有什么问题,但现在它正在工作。我真的很讨厌 Windows,但是你为 W8 实现了瓷砖真是太酷了!您的回答并不能真正解决我的问题,但无论如何我都会接受,因为您提供了一个很好的解决方法:-) 哦,我对我的“不再有预先组合的图标”这一点非常有信心,太糟糕了!但很高兴该服务解决了您的问题!

以上是关于WebClip 图标在主屏幕上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

App Icon Switcher 在 iPad 上不起作用,只有默认图标 - Swift?

BitBlt 屏幕截图在 Windows 10 上不起作用

Bootstrap 嵌套列中的链接在小屏幕上不起作用

在 OpenGL 屏幕中显示消息在 Windows 上不起作用

Flutter GestureDetector 在按钮上不起作用

swift 3 - UIRefreshControl 在大屏幕上不起作用