第一步：首先你必须要制作一个看起来既清楚又容易辨识的.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. 2017 ACM/ICPC(北京)总结

    这个季节的,北京真的很冷. 下午的热身赛,我依然先去敲一道搜索题,但是很不幸这道搜索题坑点还是蛮多的,浪费了好长时间后依然没能A掉,期间Codeblocks崩溃一次使得代码完全丢失,在队友的建议下便暂 ...

  2. Light oj 1281 - New Traffic System 多状态最短路

    题目大意:有向图,新计划的地铁,有k个计划新路,利用现有的铁路.k条新路和限定只能用d条新路,找出从0到n-1的最短路径 题目思路:用dist[u][use],储存使用use条新路,到达节点u的最短路 ...

  3. 解决Nginx出现403 forbidden

    在之前我修改了nginx.conf,所以/home/ftpuser/www文件夹下应该有index.html或index.htm文件 将index.html或index.htm文件复制到/home/f ...

  4. Markdown超链接及脚注

    Markdown链接及脚注 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内链接,超链接,脚注] 本文内容来自Markdown 11种基本语法,仅对其中我不熟悉 ...

  5. python3编码（encode,decode）

    python3默认编码为unicode,由str类型进行表示.二进制数据使用byte类型表示. 字符串通过编码转换成字节码,字节码通过解码成为字符串 encode:str --> bytes d ...

  6. 第三章 Models详解

    摘自:http://www.cnblogs.com/xdotnet/archive/2012/03/07/aspnet_mvc40_validate.html Model的概念 万丈高楼平地起,先理解 ...

  7. 在本地SharePoint 2013 搭建App开发环境

    1.环境描述: SharePoint服务器: Windows Server 2012 R2+SharePoint 2013 IP:192.168.1.180,域控:ser.com 开发环境: Wind ...

  8. 012_k8s专题系列一之进入容器日常op

    一.下面列出如何进入正在运行的k8s容器 <1> kubectl get pods #查看所有正在运行的pod NAME READY STATUS RESTARTS AGE nginx-5 ...

  9. 024_nginx之backlog坑

    一. 线上碰到一个nginx调优的一个设置,即listen后面设置 listen 80 backlog=1024; 但是多个域名都设置这个值的时候就会出现以下的提示重复报错. 关于backlog参数的 ...

  10. Select2日常操作集合

    1.获得多选值 var arraySelected = $('#carTypes').select2("data"); var carTypesDesc = ''; for (va ...