touch icon android,favicon和Apple touch icon

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

什么是favicon？什么是Apple touch icon？

大家有意无意扫过浏览器标签时，很可能看到像这样的页面名前的小图片：

这种小图片就是favicon(favourite icon)，它常见于多种浏览器中网页title的左边，收藏夹栏和书签栏中。favicon是一种ico格式的小文档，常用16x16像素的规格，图片要求不超过16色。

而使用苹果系产品时，在Safari中将某个网站加入个人收藏，或将网站添加到主屏后，会看到这样的图片：

这样的小图片就是Apple touch icon，它的作用类似于favicon，也用来标识网站。Apple touch icon一般是png或jpg(不推荐)格式的图片，需要多种规格，如57x57、72x72、114x114和144x144等，分别用来对应不同设备。

制作favicon和Apple touch icon

有很多网站可以根据上传的图片自动生成一系列favicon和Apple touch icon。诸如

当然也可以自己用Photoshop制作icon。

使用favicon和Apple touch icon

可以直接在页面的head标签内添加

即可添加名为icon-name的favicon。

而要Apple touch icon通过link标签的apple-touch-icon属性标明，还需设置sizes属性。以57x57大小的icon为例，代码为：

使用中的细节问题

这篇文章中介绍了Apple touch icon应用时的图标搜索顺序规则，和去掉图片效果的方法。

而这篇文章介绍了在Android中将网页添加到主屏所需的对Apple touch icon的调用方法。

最后，这篇文章提出了一种解决favicon兼容问题的方法。