webapp的favicon应该怎样组织代码_html/css_WEB-ITnose

处理过那么多index 页面了那么关于特别针对于此页的favicon是时候详细的总结一下了

它是网站的头像,它出现在浏览器的收藏夹中(标题的旁边) ,浏览器标签页的左上角,微信公众号的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×640的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/