它是网站的头像,它出现在浏览器的收藏夹中(标题的旁边) ,浏览器标签页的左上角,微信公众号的logo,保存网页快捷方式到桌面则会变成桌面的图标等
常用尺寸为16×16、32×32、48×48,当然随着出现地方不同需要不同的尺寸,如出现在win8的metro菜单上
以下某百科上给的意见 加上有利seo的mce_href属性
不过我通常这样写(也不会加mce_href),下面是我的方案
如果你不想考虑其它,那么完全可以一行代码 这样 加进head里
甚至可以更省事,因为现代的浏览器会自己主动去访问web根目录找名为favicon.ico的文件,你只需要做的事只是把一个32X32的favicon.ico放到那个目录下便好.
但是这样没有态度. 就仿佛说了半天跟没说一样,所以不能这样
那么来明确一下
//第一行是几乎必需的 告诉浏览器去找哪个文件 shortcut 其实是为ie而加的
//第二行是给浏览器的备用图像,当第一个文件找不到或者怎样挂了时,第二行发挥作用,
//note: type的mime格式并不重要,不写type也没关系,所以我不写
//这一行代码是给苹果设备用的 可以在iPhone/iPod Touch上将网页"添加至主屏幕"时，去掉icon上那难看的透明层．
//note: favicon不只支持ico文件,它也支持png文件,非常自由. 火狐等主流浏览器上 还支持 gif动图如:
// icon是动画的gif//特别指明 收藏夹中的使用的icon图标
//png格式的icon 不加type也可以
此外关于苹果还可以设置的更详细些 使用苹果的私有属性 apple-touch-icon
同时支持sizes属性，可以用来放置对应不同的设备。
57×57（默认值）的图标对应320×0的iphone老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。
实际上苹果会自动缩放图标所以我们只需要做两款大小 114x114 和 144x144即可
这时有一些要注意 使用apple-touch-icon时,不需要对图片进行圆角和高亮,系统会去做桌面图标这种处理,当然我觉得默认处理出来的效果那个透明层很难看,
此时使用上面apple-touch-icon-precomposed 属性,但这时图片的圆角和高亮就需要自己去在图片上做了
关于它,你还可以看看这里了解更多
http://www.uisdc.com/design-perfect-favicon-icon
http://www.w3cplus.com/css/understand-the-favicon.html
此外再提供两个生成它的在线工具
http://www.faviconico.org/favicon
http://realfavicongenerator.net/
下载本文