代码之家 › 专栏 › 技术社区 › 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 。完整披露:我是本网站的作者。

推荐文章

Marcin Budzy · Twenty 24 Wordpess主题的子菜单隐藏在图库下方(响应式灯箱和图库)(Wordpress)

1 年前

Cairan Van Rooyen · 为什么我的Grafana iframe不会显示在我的Wordpress网站上?

1 年前

Eiman Maghfouri · woocommerce _可购买的编辑挂钩

1 年前

OÄuz Erdem · chrome浏览器和iOS safari浏览器的页脚行为不同

1 年前

JapeNZ · 通过自定义cron作业函数向WooCommerce产品添加产品标签

1 年前

Mohammed Malleck · 在WooCommerce管理员编辑订单页面中隐藏客户IP地址

1 年前

Javad Hamashbouri · 不显示ajax警报

1 年前

Eduardo Relax · 如何获取WooCommerce产品类别url以在HTML元标记中显示?

1 年前

Stamp · 自定义字段未显示在WordPress REST API响应中

1 年前

pawan19 · WordPress的Nginx设置:面临301重定向问题

1 年前