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

时间：2023-01-18 13:19:47

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

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

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

最后附上：

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基础：&lt&semi;a&gt&semi;标签 编写个人收藏夹

    编写个人收藏夹 <!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. BZOJ4112 &colon; &lbrack;Wf2015&rsqb;Pipe Stream

    枚举答案,考虑将速度区间等长地划分成若干个小区间. 设$n_i$表示$i$次敲击能得到的区间数,$v_i$表示$i$次敲击之后答案落在$[v1,v_i]$之间,则$n_0=1,v_0=v2$. 因为对 ...

  2. &lbrack;转&rsqb; sql&lowbar;id VS hash&lowbar;value

    有没有发现,v$session,v$sql,v$sqlarea,v$sqltext,v$sql_shared_cursor等试图连接的时候经常会用到hash_value,sql_id,但是他们2个之间 ...

  3. highcharts报表插件之expoting参数的使用

    exporting 参数配置 本文转载自:http://blog.csdn.net/myjlvzlp/article/details/8531275 说明:导出及打印选项 打印导出功能的配置项. 1. ...

  4. 什么是JSONP以及它是怎么产生的

    什么是JSONP以及它是怎么产生的         1.什么是jsonp                 JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Scr ...

  5. HDU 4324 Triangle LOVE 拓扑排序

    Problem Description Recently, scientists find that there is love between any of two people. For exam ...

  6. 3．编写Java应用程序。首先定义一个描述银行账户的Account类，包括成员变 量&OpenCurlyDoubleQuote;账号”和&OpenCurlyDoubleQuote;存款余额”，成员方法有&OpenCurlyDoubleQuote;存款”、&OpenCurlyDoubleQuote;取款”和&OpenCurlyDoubleQuote;余额查询”。其次， 编写一个主类，在主类中测试Account类的功能。

    Account package com.hanqi.test; public class Account { private String zhanghao;private double yve; A ...

  7. Android 上层应用读写设备节点

    Android 上层应用读写设备节点 Android L [TOC] 1. Android 设备节点 Android基于Linux内核.设备节点文件是设备驱动的逻辑文件,可以通过设备节点来访问设备驱动 ...

  8. ROS&lowbar;Kinetic&lowbar;16 ubuntu中安装使用Matlab和ROS

    ROS_Kinetic_16 ubuntu(16.04)中安装使用Matlab(2015b)和ROS(kinetic) 参考网址:http://cn.mathworks.com/hardware-su ...

  9. Python爬虫入门教程 21-100 网易云课堂课程数据抓取

    写在前面 今天咱们抓取一下网易云课堂的课程数据,这个网站的数据量并不是很大,我们只需要使用requests就可以快速的抓取到这部分数据了. 你第一步要做的是打开全部课程的地址,找出爬虫规律, 地址如下 ...

  10. python全栈开发day66-视图系统、路由系统

    一.昨日内容回顾 1. tags 1. for循环 {% for name in name_list %} {{ name }} {% endfor %} {% for name in name_li ...

相关文章