刺客 » Firefox http://blog.cike.org 刘益民中文网 Tue, 28 Jun 2011 00:33:18 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 从CHINAZ看FAVICON.ICO设计 http://blog.cike.org/2008/favicon-ico/ http://blog.cike.org/2008/favicon-ico/#comments Sun, 17 Aug 2008 16:39:37 +0000 cike http://temp.cike.org/2008/08/%e4%bb%8echinaz%e7%9c%8bfaviconico%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e8%ae%be%e8%ae%a1/ Favorites Icon其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。可以出现在浏览器标题选项卡、URL前、收藏夹中

如何像CHINAZ一样做出动画效果且实现跨浏览器兼容呢？是否存在可改进的内容？

 

继续阅读 →]]> FAVICON.ICO知识基础

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

网站如何应用Favicon图标

  1. 方法一：将制作的Favorites Icon命名为Favicon.ico，放置网站根目录即可，浏览器会自动索引
  2. 方法二：使用<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

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

关于Favicon结论

  1. 无动画要求：使用ico格式，并命名为 favicon放置于网站根目录
  2. 有动画要求最佳方法：分别制作ICO格式和动画格式两个favicon，将ICO格式favicon文件放置根目录，网站HEAD区使用 <link rel=“icon” href=“favicon.gif” type=“动画格式图片MIME” >
]]> http://blog.cike.org/2008/favicon-ico/feed/ 0