div+css

当前位置:地方网站工作室 >> 网络技术 >> div+css >> 浏览文章

从CHINAZ看FAVICON.ICO跨浏览器设计

文章来源:中国站长网  文章作者:Assassin.c  日期:2008年10月02日
FAVICON.ICO知识基础 FavoritesIcon其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。可以出现在浏览器标题选项卡、URL前、收藏夹中,大小为16*16,目前IE6好像不支持自定义Favicon,I

FAVICON.ICO知识基础

Favorites Icon其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。可以出现在浏览器标题选项卡、URL前、收藏夹中,大小为16*16,目前IE6好像不支持自定义Favicon,IE7仅支持ICO格式,FF/Opera支持GIF/PNG/ICO/JPG等格式。

网站如何应用Favicon图标

方法一:将制作的Favorites Icon命名为Favicon.ico,放置网站根目录即可,浏览器会自动索引
方法二:使用<link rel="icon" href="图标路径" type="MIME类型" />如 <link rel="icon" href="/cike/favicon.ico" type="image/x-icon" />

如何使用动画Favicon?

无意中看到CHINAZ的FAV图标在FF中隔8秒左右上滚一次,还以为是眼花了,截图为证

点击浏览下一页

IE7中显示正常一定是ICO格式,ICO是不支持动画的,CHINAZ是如何做的呢?

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="favicon.gif" type="image/gif" >

结论出来了在IE中使用第一行代码,遇到第二行因不支持GIF格式所以不影响第一行效果,FF支持GIF格式,覆盖第一行,最终显示favicon.gif

CHINAZ的用法完美了吗?

力求精简的我们是不会就此收工的,既然浏览器默认会索引根目录下的 favicon.ico,仅使用代码

<link rel="icon" href="favicon.gif" type="image/gif" >

可以实现IE显示ICO,FF/Opera显示gif吗?实践中……

以下依次为IE7、Opera、FF3+FireBug

(原截图上URL太多,为免软文嫌疑图省略,有兴趣自己试DEMO吧)

看来CHINAZ还可以为每个页面精简一行代码!演示DEMO: http://blog.cike.org/demo/html/favicon/

关于Favicon结论:

无动画要求:使用ico格式,并命名为 favicon放置于网站根目录

有动画要求最佳方法:分别制作ICO格式和动画格式两个favicon,将ICO格式favicon文件放置根目录,网站HEAD区使用 <link rel="icon" href="favicon.gif" type="动画格式图片MIME" >

追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇:CSS颜色值的三种形式名称 RGB和十六进制
下一篇:几个经典的css技巧
相关文章

我们能为菏泽企业做什么?

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务!
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER,全面的SEO推广方案,为您量身定制SEO网站推广策划!
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机!
《书生商友》商机群发软件
Booksir,一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们?

手机:18651363941
地址:由于菏泽生存压力巨大,本人现未居菏泽,在北京就值。如有业务需要,请直接电联。
联系人:刘峰 高娜
QQ:61572536
微信:61572536
邮箱:guf521@163.com

服务宗旨

因为执着 所以专业 追求卓越 精心缔造
售后为先 宁得罪新客户  不拖拉老客户
诚信为本 新互顶级域名空间  畅爽速度