favicon和Appletouchicon是用于标识网站的小图标。favicon常见于浏览器地址栏、收藏夹和书签，通常为16x16像素的ico格式。Appletouchicon则在苹果设备的主屏幕和收藏夹中显示，需要多种尺寸的png或jpg格式。制作这些图标可以借助在线工具或Photoshop。添加它们到网页head部分，通过link标签指定不同属性。
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兼容问题的方法。
扫一扫
1639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
