代码之家 › 专栏 › 技术社区 › Julian F. Weinert

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

apple-touch-icon favicon safari ios7 wordpress

Julian F. Weinert · 技术社区 · 11 年前

我知道,这不是一种新技术,这个问题在不同的变体中被问过几次。但没有一个(也没有谷歌搜索)能帮我解决问题。

我正在使用以下链接:

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

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

enter image description here

1 回复 | 直到 11 年前

philippe_b 11 年前

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

您的代码是正确的,但iOS7有两个不同之处,这改变了规则:

尺寸发生了变化。例如,自iOS7以来,72x72的图片现在应该是76x76。好吧,iOS7可以应对旧尺寸,所以这不是你观察到的原因。
预合成的图片现在已弃用。没有更多了 apple-touch-icon-precomposed 只有 apple-touch-icon 支持。这可能解释了主屏幕上图标失败的原因。

看见 Apple references 新的大小、预期的HTML代码等。

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

推荐文章

Benlov · iOS书签显示favicon而非apple touch图标

7 年前

senox13 · 如何从JavaScript中引用作为Chrome扩展的一部分的文件

7 年前

Cris · Safari收藏夹/书签图标未显示

7 年前

Markeee · 真正的Favicon生成器代码错误,会减慢站点速度吗?

7 年前

Johan Fredin · 弹簧靴定制favicon。ico未显示

7 年前

Caio Menezes · Angular&Spring Boot应用程序上的奇怪favicon

8 年前

Mike Irving · 浏览器是否需要favicon。图标,即使它在HTML中没有链接

8 年前

nick zoum · 我如何阅读Java网页的常见内容?

9 年前

Ilja · 使用appletouch图标作为favicon可能吗?

10 年前

Julian F. Weinert · WebClip图标在主屏幕上不起作用

11 年前