简单5步,制作动画favico(animated favico)

软硬天师   评论

favico就是浏览器地址栏内网页地址前的小图标,有关于如何制作favico的文章已经很多了,可以参见友站我爱水煮鱼肥硕博客的相关文章。

有趣的是,如果你使用的浏览器是firefox的话,还可以看见动画的favico,firefox从1.5开始支持此特性,而IE不支持。如果你用的是IE的话,下面是动画favico的示例图片,用firefox浏览本站的朋友可以访问统计或者留言页面查看。

animationfavico1.gif

animationfavico2.gif

制作这样一个favico其实很简单,因为firefox在显示一个图片时,会把此图片显示在原来显示favico的地方,你可以点此图片链接查看效果。因此我们只要把相关的gif文件信息在页头告诉浏览器就可以了。具体做法如下:

第一步:找一个16×16的GIF或者自己做一个,16×16是favico所必须的图片尺寸。比如我们有了一个animate.gif –> favico.gif

第二步:上传gif文件到服务器相应目录,比如网站的根目录 /animate.gif

第三步:修改博客模版header.php 插入一句 <link rel=”icon” href=”/animate.gif” TYPE=”image/gif” />

保存header.php后,这样其实就可以了。有人说把gif后缀改成ico也是可行的,因此

第四步(optional):把animate.gif 文件名字 改成animate.ico,沿用原来的favico语句:<link rel=”shortcut icon” href=”/favicon.ico” /> ,或使用上面第三步的语句,这样在IE和FF下就都能显示,只不过FF下显示的是动画,而IE显示的是动画的第一帧

如果需要在不同的博客页面显示不同的favico,

第五步(optional):可以在header.php模板中使用is_page(),is_category(), is_archive() 等wordpress的template tag判断当前在那种类型的页面,然后选用不同的gif(如下图)

headersettingforfavico.jpg

可以参见我的主页和其他页面如统计或者留言页面,favico的显示效果是不同的。

注意:动画favico只能在firefox浏览器下可见,internet explorer是看不见的。

下面两个网站也是采用动画favico的

更多信息可以参阅本文的信息来源:Animated favicons

ps:原来为友站偶爱偶家想过一些favico(见logo设计一文) ,只因favico限定的16×16尺寸太小而没有满意的。如果使用动画favico的话就可以很轻易解决这个问题:设定首帧图片为其缺省的“家”字,后续帧的动画效果可以是“偶爱偶”三字从右到左滚动最后定格在“家”字上,解决FF动态显示和IE静态显示的问题。

信息来源:

相关日志

3条评论 to “简单5步,制作动画favico(animated favico)”

  1. Gravatar 偶爱偶家

    怎么做这个gif你没说, 最关键的部分, 放的方法跟普通的都一样

  2. Gravatar fisio

    怎么做gif 这个要说就长篇了,呵呵

  3. Gravatar 央街浪子

    @偶爱偶家:已经开贴补上了。
    @fisio:确实如此啊,不过笨人笨办法,DIY一个滚动横幅还行。

发布评论

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS 登录
This blog is protected by Dave's Spam Karma 2: 4679 Spams eaten and counting...