webapp的favicon应该怎样组织代码

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

它是网站的头像,它出现在浏览器的收藏夹中(标题的旁边) ,浏览器标签页的左上角,微信公众号的logo,保存网页快捷方式到桌面则会变成桌面的图标等

常用尺寸为16×16、32×32、48×48,当然随着出现地方不同需要不同的尺寸,如出现在win8的metro菜单上

以下某百科上给的意见 加上有利seo的mce_href属性

<link rel="icon" href="/dir/favicon.ico" mce_href="/dir/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/dir/favicon.ico" mce_href="/dir/favicon.ico" type="image/x-icon">
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >

不过我通常这样写(也不会加mce_href),下面是我的方案

<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/favicon.ico">
<link rel="Bookmark" href="/favicon.ico" >

如果你不想考虑其它,那么完全可以一行代码 这样 <link rel="shortcut icon" href="/favicon.ico" /> 加进head里

甚至可以更省事,因为现代的浏览器会自己主动去访问web根目录找名为favicon.ico的文件,你只需要做的事只是把一个32X32的favicon.ico放到那个目录下便好.

但是这样没有态度. 就仿佛说了半天跟没说一样,所以不能这样

那么来明确一下

<link rel="shortcut icon" href="http://a.com/favicon.ico" type="image/vnd.microsoft.icon">  
//第一行是几乎必需的 告诉浏览器去找哪个文件 shortcut 其实是为ie而加的
    
<link rel="icon" href="http://a.com/favicon.ico" type="image/vnd.microsoft.icon"> 
//第二行是给浏览器的备用图像,当第一个文件找不到或者怎样挂了时,第二行发挥作用, 
//note: type的mime格式并不重要,不写type也没关系,所以我不写

<link rel="apple-touch-icon-precomposed" href="xxx.png">
 //这一行代码是给苹果设备用的 可以在iPhone/iPod Touch上将网页"添加至主屏幕"时，去掉icon上那难看的透明层．
//note: favicon不只支持ico文件,它也支持png文件,非常自由. 火狐等主流浏览器上 还支持 gif动图

如:
 <link rel="icon" type="image/gif" href="animated_favicon.gif" >   // icon是动画的gif

 <link rel="Bookmark" href="favicon.ico" /> //特别指明 收藏夹中的使用的icon图标 

<link rel="icon" type="image/png" href="/path/image.png">        //png格式的icon 不加type也可以

此外关于苹果还可以设置的更详细些 使用苹果的私有属性 apple-touch-icon
<link rel="apple-touch-icon" href="/custom_icon.png"/>   

同时支持sizes属性，可以用来放置对应不同的设备。

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" /> 

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/