摘要:本文将带你了解Webapp开发之favicon应该怎样组织代码,希望本文对大家学WEBAPP有所帮助。
处理过那么多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="//a.com/favicon.ico" type="image/vnd.microsoft.icon">
//第一行是几乎必需的 告诉浏览器去找哪个文件 shortcut 其实是为ie而加的
<link rel="icon" href="//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 属性,但这时图片的圆角和高亮就需要自己去在图片上做了
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号