ico图标转换不了(Favicon.ico浏览器图标文件制作和正确使用)

ico图标转换不了(Favicon.ico浏览器图标文件制作和正确使用)(1)

favicon图标介绍

所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳favicon到桌面以建立到网站的快捷方式;除此之外,标签式浏览器甚至还有不少扩展的功能,如FireFox甚至支持动画格式的favicon等。图标文件一般尺寸较小,常见的是16*16,32*32和48*48。图标是部分透明的,可以直接打开浏览。

今日头条favicon图标

ico图标转换不了(Favicon.ico浏览器图标文件制作和正确使用)(2)

如何使用Favicon.ico?

1. 将成功生成的图标文件下载并改名为favico.ico,上传到网站根目录。

2. 在网站首页的源文件 head 之间插入下面的代码:

<link rel="shortcut icon" href="/favicon.ico"/> <link rel="bookmark" href="/favicon.ico"/>

制作ico图标

一:手动制作

.可以手动用ps等软件制作尺寸为6*16,32*32和48*48像素的png格式图片,然后再用格式工厂等软件转换图片格式为ico格式。

二:在线制作

我们也可以在线制作,推荐两个在线制作的网站。

http://www.bitbug.net/ http://www.faviconico.org/

操作很简单,上传自己喜欢的图片点击制作即可,完成后下载即可使用。

如何创建动态ico图标

先把做好的gif动态图标命名为favicon.gif,然后再 head 之间加上:

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

注意

強烈推荐使用.ico而不是使用png或者gif

1. 最重要的就是,所有的浏览器,包括IE5,都支持ico文件,gif、png等都没有ico支持范围广

2. 如果有favicon.ico,服务器的404错误会有友好返回,我们测试了所有现代浏览器(测试了 Chrome 4, Firefox 3.5【火狐】, IE8, Opera 10 and Safari 4),发现他们都会请求favicon.ico,这样错误页就会有对应图标显示,所以最好用ico!

3. 一个.ico文件可以同时满足多个尺寸的需求,不需要每个尺寸单独生成一个文件。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页