欢迎使用自行搭建的贴吧云签到;如发现本模板问题请告诉我,thx

自定义网站chrome“添加到主屏幕”图标

博客 honeyshine 2630℃ 0评论

发现很多网站在添加到主屏幕之后还有可以设定的图标,不免有些好奇?

其实这个方法不仅适用于chrome,也适用于safari,或者说根本就是从safari那里学来的。

因为chrome用的就是之前safari的方法,看到代码你就知道了。


首先做一个自己喜欢的图标,上传到你的图床或者你的网站目录,可命名为apple-touch-icon-144×144.png。

(如果你希望各个大小的屏幕都能很好的显示,你可以多做几个不同尺寸的:52×52 适用于非 Retina 屏的 iPhone;120×120 适用于 Retina 屏的 iPhone;72×72 适用于非 Retina 屏的 iPad;144×144 适用于 Retina 屏的 iPad)

然后在网站的<head>和</head>之间添加如下代码:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://网址/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://网址/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://网址/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon-precomposed" href="http://网址/apple-touch-icon-57x57.png">

如果你的这样就可以实现你想要的效果了,效果如下:

before-after-icon

转载请注明:记忆反射弧 » 自定义网站chrome“添加到主屏幕”图标

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址