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" />
这时有一些要注意 使用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/
