2015-06-11

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

发现很多网站在添加到主屏幕之后还有可以设定的图标,不免有些好奇?
其实这个方法不仅适用于chrome,也适用于safari,或者说根本就是从safari那里学来的。
因为chrome用的就是之前safari的方法,看到代码你就知道了。

首先做一个自己喜欢的图标,上传到你的图床或者你的网站目录,可命名为apple-touch-icon-144x144.png。
(如果你希望各个大小的屏幕都能很好的显示,你可以多做几个不同尺寸的:52x52 适用于非 Retina 屏的 iPhone;120x120 适用于 Retina 屏的 iPhone;72x72 适用于非 Retina 屏的 iPad;144x144 适用于 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">
如果你的这样就可以实现你想要的效果了,效果如下:

特别说明

由于众所周知的原因,本博客以往文章的图片无法显示,请谅解。

标签

生活纪实 (191) 感想 (113) ingress (54) 软件 (53) 小诗 (34) 梦境 (28) 教程 (26) 科幻 (21) 体会 (20) 杭州 (11) blogger (5) wordpress (5) Google adsense (4) Google voice (3) Chrome (2) Tensorflow (1) 谷粉 (1)