第一步：首先你必须要制作一个看起来既清楚又容易辨识的.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. Shiro入门 - 通过自定义Realm连数数据库进行认证

    添加shiro-realm.ini文件 [main] #自定义Realm myRealm=test.shiro.MyRealm #将myRealm设置到securityManager,相当于Sprin ...

  2. netty 在线教程

    https://blog.csdn.net/qq_33314107/article/details/81321438 https://www.cnblogs.com/myJavaEE/p/679333 ...

  3. Kotlin中构造方法的参数var val 和 什么都没有的区别

    1.什么都没有,在该类中使不能使用的, 这个参数的作用就是,传递给父类的构造方法 2.使用var 可以在类中使用,相当于 我们声明了一个该类中定义了一个private 的成员变量 3.val表示不让修 ...

  4. 使用WebView时软键盘遮挡H5页面解决办法

    简单解决办法:在清单文件中添加 android:windowSoftInputMode="adjustResize" 此举可在软键盘弹出时,重新测量布局,保证不遮挡光标的所在位置. ...

  5. mysql 原理 ~ 索引通说

    简介: 来说说索引吧目的:为了加快数据库的数据查找速度,索引应用而生基础知识基本定义  1 遍历 所谓遍历二叉树,就是按一定的规则和顺序走遍二叉树的所有结点,使每一个结点都被访问一次,而且只被访问一次 ...

  6. Javascript - ExtJs - 组件 - 分页

    服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据.  , name: "sam" }     ] } 准备: CREATE PROCEDURE [dbo]. ...

  7. 原子类型的使用&Unsafe&CAS

    在项目中也经常可以见到原子类型(AtomicXXX)的使用,而且AtomicXXX常用来代替基本类型或者基本类型的包装类型,因为其可以在不加同步锁的情况下保证线程安全(只对于原子操作). 下面以Ato ...

  8. [Docker]CentOS7下Docker安装教程

    想要倒腾Kubernetes的话,第一步就是要会安装Docker,这篇文章讲一讲过程 安装步骤 检查内核版本,必须是3.10以上 uname -r 安装Docker yum -y install do ...

  9. delphi 的 ORM 框架

    delphi 的 ORM 框架,收集如下: 1.EntityDac    https://www.devart.com/entitydac/download.html 2.mORMot    The  ...

  10. Python运维开发基础10-函数基础【转】

    一,函数的非固定参数 1.1 默认参数 在定义形参的时候,提前给形参赋一个固定的值. #代码演示: def test(x,y=2): #形参里有一个默认参数 print (x) print (y) t ...