码迷,mamicode.com
首页 > Web开发 > 详细

如何在地址栏(title标签里)和收藏夹里 加上网站的标志ICO、LOGO图片

时间:2017-10-02 15:23:36      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:快捷   而且   href   style   es2017   制作   添加图标   目录   www   

第一步:首先你必须要制作一个看起来既清楚又容易辨识的.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 图标文件放入网站根目录就行,什么代码都不写就可以了就可以实现在收藏夹添加图标,但经过测试并不会起作用,不写代码怎么可能实现呢,嗯 想想也是!,那我们继续往下看!)。但是如果你没办法把文件上传到上面所说的根目录怎么办?没关系,你可以在网页源码的 <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名称)

 

 这是我在百度的测试效果:

技术分享

最后附上:

ico在线转换小工具一

ico在线转换小工具二

 

声明:此文章含有转载内容,原作者未找到,所以不附原作者地址了,如有侵权24小时内删除,联系QQ:1522025433。

 

如何在地址栏(title标签里)和收藏夹里 加上网站的标志ICO、LOGO图片

标签:快捷   而且   href   style   es2017   制作   添加图标   目录   www   

原文地址:http://www.cnblogs.com/peachblossom/p/7620138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!