第一步：首先你必须要制作一个看起来既清楚又容易辨识的.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后的 / 斜线即：站点根目录的意思，只是个人测试，仅供参考！）

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

最后附上：

ico在线转换小工具一

ico在线转换小工具二

补充：

关于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。

如何在地址栏（title标签里）和收藏夹里 加上网站的标志ICO、LOGO图片的更多相关文章

  1. HTML基础：<a>标签 编写个人收藏夹

    编写个人收藏夹 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  2. 骚操作！曾经爱过！用 Python 清理收藏夹里已失效的网站

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 小詹&有乔木 PS:如有需要Python学习资料的小伙伴可 ...

  3. 收藏夹里的js

    释放右键 javascript:(function(){var doc=document;var bd=doc.body;bd.onselectstart=bd.oncopy=bd.onpaste=b ...

  4. chrome打开收藏夹的网站在新的标签页

    chrome浏览器在新的标签页打开收藏夹的网址,现在设置不了,而且右键,在新标签页中打开有点烦..下面说说直接打开的方式. 方法1: 鼠标滚轮,直接点击收藏夹的网址,即可 方法2: ctrl + 鼠标 ...

  5. 使用C语言将IE收藏夹生成HTML

    IE收藏夹里收藏的链接很多,查找也不方便,使用C编写一个小工具,可以将收藏夹里的链接文件生成到一个HTML文件上. 源码还有许多地方需要优化,后续我会优化,先分享出来.目的主要是为了练习C语言,这个代 ...

  6. 兼容FF 加入收藏夹和设为首页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 在网页标题栏上和收藏夹显示网站logo

    第一步,准备一个图标制作软件. 首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以.ico 作为扩展名.普通的图像设计软件无法使用这种格式,所以您需要到下载一个ico图标工具,本站常 ...

  8. 如何备份Chrome浏览器收藏夹

    前言:最近,由于工作需要,要卸载当前Chrome版本,并安装最新版Chrome.卸载前,意识到之前收藏在收藏夹里的很多知识链接还未备份,于是有了今天的话题:如何备份Chrome浏览器的收藏夹? 主题: ...

  9. 如何让ie8地址栏下拉框里不显示历史记录和收藏夹

    打开浏览器,点击IE浏览器上方工具——Internet选项——内容——自动完成的设置——地址栏里面的勾勾去掉,浏览历史记录和收藏夹里面的东西就自动没有了

随机推荐

  1. Javascript入门(三)函数

    Javascript函数 一.函数定义与执行 <script type="text/javascript"> //define function fun1(){ ale ...

  2. WSGI、uwsgi和uWSGI

    一.WSGI WSGI ( Web Server Gateway Interface )是一个网络服务器和网络应用的通用接口的规范或者用于Python框架. 由于python开发人员在网络框架的选择限 ...

  3. ieda 运行web--导入其它jar包

    == 配置 或选择tomcat 1.打开IntelliJ IDEA,点击菜单的“Run”->“Edit Configurations...”,然后会打开运行设置弹框.2.在弹框中,点击左上角的“ ...

  4. Light oj 1099 - Not the Best 次短路

    题目大意:求次短路. 题目思路:由于可能存在重边的情况所以不能采用邻接矩阵储存图,我用了邻接表来存图. 由起点S到终点E的次短路可能由以下情况组成: 1.S到v点的次短路 + v到E的距离 2.S到v ...

  5. 20165234 《Java程序设计》第七周学习总结

    第七周学习总结 教材内容学习 第十一章 JDBC与MySQL数据库 连接数据库: 1. 下载JDBC-MySQL数据库驱动 2. 加载JDBC-MySQL数据库驱动 3. 连接数据库 条件与排序查询: ...

  6. 前端-----css（1）

    css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. css知识点 注释 /* 注释内容 */ css四 ...

  7. 20165231 2017-2018-2 《Java程序设计》第5周学习总结

    教材学习内容总结 第七章 内部类 在一个类中声明另一个类,这样的类称作内部类,而包含内部类的类成为内部类的外嵌类. 内部类的类体中不可以声明类变量和类方法.外嵌类的类体中可以用内部类声明对象,作为外嵌 ...

  8. 设置LISTControl控件某一行的背景和文字颜色

    定义宏 用listcontrol的SetItemData设置某一行的属性,通过自定义属性标识实现. 自定义某行内容颜色属性: #define COLOR_DEFAULT 0 //默认颜色 #defin ...

  9. platform模块

    import platform ''' python中,platform模块给我们提供了很多方法去获取操作系统的信息 如: import platform platform.platform() #获 ...

  10. FAT文件系统规范v1.03学习笔记---3.根目录区之FAT目录项结构

    1.前言 本文主要是对Microsoft Extensible Firmware Initiative FAT32 File System Specification中文翻译版的学习笔记. 每个FAT ...