如何在地址栏(title标签里)和收藏夹里 加上网站的标志ICO、LOGO图片
第一步:首先你必须要制作一个看起来既清楚又容易辨识的.ico格式的小图片。
我们将图标的大小定义为16x16 像素。此外在制作图形文件的时候,你可能需要把色盘设定成只使用标准的 16 色 Windows 色盘,这样做出来的图形才会在各种配置的机器上看起来都是一样的。记得文件名是固定的,要叫做“favicon.ico”。这个http://www.bitbug.net/网页里有最快捷的制作favicon.ico的方法。
第二步:把制作好的 favicon.ico 文件上传到你的网站根目录去。
例如你的网址是:http://www.baidu.com那么你的 favicion.ico 就应该被放在下面这个URL下http://www.baidu.com/favicion.ico
每当有网友要把你的网站“加入收藏”的时候,IE 浏览器便会到你的网站根目录去寻找看看有没有favicon.ico这个文件,如果有的话,这个文件就会被用来当作书签上面的图示了(意思就是说:只要把favicon.ico 图标文件放入网站根目录就行,什么代码都不写就可以了就可以实现在收藏夹添加图标,但经过测试并不会起作用,我在网上找了一下原因:
是因为你在本地测试的,而不是在服务器端测试的。
【1】在服务器端测试,默认会识别根目录下favicon.ico的文件作为网页的ico。若在个别页面有不同的ico,在个别页面用<link>添加ico即可
【2】在本地端测试,chrome、opera和firefox支持通过<link>标签添加ico,但IE和safari不支持)。但是如果你没办法把文件上传到上面所说的根目录怎么办?没关系,你可以在网页源码的 <head>标签里区里面加上下面的设定:
<head>
<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico">
<title>在我前面加图标</title>
</head>
记得要把上面的http://www.baidu.com/favicon.ico代换成你自己的 URL(也可以改成相对地址或绝对地址) 。使用这个做法的话,就不一定要把图形文件放在网站的根目录下面了,你可以放在任何位置,甚至直接连结到其他网站上面的图形文件也可以,而且图形文件的文件名也不一定要叫做 favicon.ico,可以自己随便取。不过要注意的是使用这个做法的话,只有在网友把 加入上面 HTML 代码 的页面 加入书签的时候才会有作用。
大功告成!只要有网友将你的网站加入收藏夹中,你的 logo 就会出现在收藏夹目录里面了。不过有一点请记住:你的 logo 在网友还没将你的网站加入书签以前是不会被看见的,而且有些免费网页空间并不支持 ico 图形格式。
如果你favicion.ico已经传到你网站空间的根目录下了,依然不显示的话,那你就关闭浏览器,重新打开空白的浏览器,找到浏览器的“工具”,然后“删除浏览的历史记录......”,再打开你的网站(页),就可以了。我试过了,可以的!
<link href="kei.ico" rel="shortcut icon">
(请将kei.ico改为你对应的图片名称)
这段代码是将ie地址栏前的图标换成自己的icon;
而
<link href="kei.ico" rel="bookmark">
(请将kei.ico改为你对应的图片名称)
是将收藏夹中图标换掉。
或者:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
(可修改对应的.ICO名称)
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
(可修改对应的.ICO名称)
但在本地测试时,ie支持显示图标,在谷歌浏览器
<link rel="shortcut icon" href="favicon.ico">
或 <link rel="shortcut icon" href="/favicon.ico">
或<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">或
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 都可以显示,
在火狐浏览器中只支持
<link rel="shortcut icon" href="favicon.ico">或
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> (区别在于href后的 / 斜线即:站点根目录的意思,只是个人测试,仅供参考!)
这是我在百度的测试效果:
最后附上:
补充:
关于favicon.ico
favicon.ico图标是网站的缩略标志,可以显示在浏览器标签、地址栏左边和收藏夹,是展示网站个性的缩略logo标志,也可以说是网站头像,如果要让网站看起来更专业、更美、更有个性,favicon.ico是必不可少的,所以你在本站使用ICO图标转换工具就可以轻松达到你的要求。
在线ico图标制作工具使用说明
1. 原始图片必须为jpg、jpeg、gif、png格式之一
2. 原始图片文件大小<300k。
3. 建议:原图的长和宽相同,以避免转换后生成的ico图标因缩放而失真。
4. 点击"浏览"按钮上传本地图片,再点"点此生成图标"即可。
如何使用Favicon.ico?
1. 将成功生成的图标文件下载并改名为favico.ico,上传到网站根目录。
2. 在网站首页的源文件<head> </head>之间插入下面的斜体部分代码<head> ……<link rel="shortcut icon" href="favicon.ico"></head>
3.动态ico图标的实现方法,先把做好的gif动态图标命名为favico.gif <head></head>之间加上: <link rel="icon" href="favicon.gif" type="image/gif" >
ico百科
Favicon原本是windows中存储单个图案的一种图标文件格式,现可以用作软件、文件夹以及网站等的缩略标志,显示在用户的资源管理器,浏览器的地址栏、标题栏和多页面浏览器的标签栏上。图标文件一般尺寸较小,常见的是16*16,32*32和48*48。图标是部分透明的,可以直接打开浏览。
声明:此文章含有转载内容,原作者未找到,所以不附原作者地址了,如有侵权24小时内删除,联系QQ:1522025433。