第一步：首先你必须要制作一个看起来既清楚又容易辨识的.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. A - Arcade Game Gym - 100814A （概率思维题）

    题目链接:https://cn.vjudge.net/contest/285964#problem/A 题目大意:每一次给你你一个数,然后对于每一次操作,可以将当前的数的每一位互换,如果互换后的数小于 ...

  2. linux(ubuntu) python 版本切换

    参考链接:https://blog.csdn.net/thankyou0/article/details/79610854

  3. python初级实战-----主机在线情况监控web

    背景 公司有600多台服务器,打算写一个小程序,能一眼看见哪些服务器不在线. 大体思路是: 1.把所有服务器ip存进数据库,ping命令判断服务器是否在线 2.更新数据库中ip的状态 3.简单的web ...

  4. C++中的static关键字总结

    C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 1.面向过程设计中的st ...

  5. 关于Jonathan S. Weissman与RIT（罗切斯特理工学院，位于纽约）

    信息来源于:edx平台的 RITx: CYBER501xCybersecurity Fundamentals  课程的介绍(https://courses.edx.org/courses/course ...

  6. 如何生成添加前缀的顺序DIV

    今天我们这边的需求是生产类似于 div1 div2 div3 这种的方式. filters: { pre: function (value) { return 'div' + value; } }, ...

  7. python 大全

    python 大全:https://awesome-python.com/ 生产 GUI 应用的库 :PyQt ,PySide , 不错   (https://kivy.org)kivy - A li ...

  8. linux快速将磁盘额外空间扩展到某一挂载点

    由于之前在创建用户时,为该用户目录分配的空间只有5G,在后续的开发,存放的东西越来越多,空间眼看就不够用了,网上查了一下,很多都是教我们将其余挂载点分配过多的空间分配到空间不足的挂载点,步骤还不算太复 ...

  9. $Django content_type组件 缓存组件

    1  content_type组件(只能方便插入添加) 需求:课程,学位课(不同的课程字段不一样),价格策略 #免费课 class Free_classes (models.Model): id = ...

  10. 修改JDK版本配置

    我使用的maven是3.0.5版本的,在创建项目的时候,默认使用的jdk为1.5版本 在项目的pom.xml中添加如下配置可修改使用的jdk版本. <properties> <!-- ...