网页favicon.ico图标设置(转)
随便打开一个网页:比如 http://www.baidu.com/
可以看到在浏览器的标签头上面显示了一个图标,这个图标是:,也就是我们常说的favicon.ico.
由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理,所以还是新建web项目如下:
home.html 代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>home page</title>
<link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
</head>
<body>
home page
</body>
</html>
下面两行代码就可以告诉浏览器使用wangyi.ico 作为home.html的图标了:
<link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
基本上所有的现代浏览器都支持这种写法,例如firefox,ie9.
firefox:
ie9:
可惜的是普通用户用的基本上是360浏览器,搜狗浏览器,qq浏览器等。
搜狗浏览器:
可以知道,我们在网站根目录下面的favicon.ico 起作用了,所以显示的是网站根目录下面的favicon.ico 图标。
打开360浏览器:
奇怪了,google的图标哪里来的。。。。???
我们的faviconTestWeb 只有3个图标,一个是wangyi.ico.baidu.ico.favicon.ico(cnblogs的图标)。
为什么使用360显示的是google的图标?
其实360浏览器在浏览网页的时候,它会忽略端口,也就是说http://localhost:3529/home.html,
firefox请求的是:link 的href所对应的图标。
搜狗浏览器等:请求的是http://localhost:3529/favicon.ico.
360浏览器等:请求的是http://localhost/favicon.ico,
也就是不管你请求的是http://host/home.html,还是http://host:333/home.html,还是http://host/test/home.html.
它请求的都是http://host/favicon.ico.
证据就是打开360se的安装目录:
所以如果你的网站favicon.ico 不起作用,或者是想要让favicon.ico 的兼容性更好,要使用下面几个步骤:
1:检查网站根目录下面的favicon.ico,也就是:http://host/favicon.ico.,而不是http://host/some/favicon.ico.
2:确保<link rel="icon" href="http://host/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://host/favicon.ico" type="image/x-icon" />
3:如果你的网站带端口,或者是测试版本的话,那么尤其要注意360等浏览器,它们在请求favicon.ico 的时候会忽略端口号的。
顺便推荐一篇文章:[架站] 為什麼網站的根目錄最好有 favicon.ico 和 robots.txt 存在?
打个广告:ico图标在线制作:http://www.faviconico.org/
http://blog.csdn.net/zhizaibide1987/article/details/42001955
网页favicon.ico图标设置(转)的更多相关文章
- 让网站不去请求favicon.ico图标
让网站不去请求favicon.ico图标 favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404.出于优 ...
- Tomcat修改favicon.ico图标,Linux下Tomcat修改favicon.ico图标,Tomcat更换favicon.ico图标
Tomcat修改favicon.ico图标,Linux下Tomcat修改favicon.ico图标,Tomcat更换favicon.ico图标 >>>>>>> ...
- 织梦CMS站点favicon.ico图标的放置
1.在线制作一个ico图标,推荐制作网站:http://ico.55.la/.制作好后,将favicon.ico图标放在站点模板默认目录下的images文件夹里. 2.在index.htm的<h ...
- 那么如何添加网站favicon.ico图标
1. 获得一个favicon.ico的图标,大小为16px×16px最为合适 2. 将制作好的图标文件Favicon.ico上传到网站的根目录: 3. 在首页文件的html代码的头部中加入如下代码: ...
- java web项目修改favicon.ico图标的方式
1.修改整个项目的tomcat图标 找到tomcat的根目录(tomcat-webapps-ROOT目录),然后将修改的favicon.ico图标覆盖掉本地的图标,然后再重启项目,刷新,清除浏览器缓存 ...
- 制作 Favicon.ico 图标教程
摘要:有一些站长认为 favicon.ico 图标对于一个网站没有什么作用.甚至有一些站长认为,少加载一个图片,页面设计展现的速度更快些.的确,理论上是对的,但乐猪认为这种想法是肤浅的!有这种想法的站 ...
- 网站favicon.ico 图标
favicon.ico一般用于作为缩略的网站图标,它显示在浏览器的地址栏或者标签上.目前主要的浏览器都支持favicon.ico图标. 一.制作favicon图标 1.把图标切成png图片. 2.把p ...
- WEB网站的favicon.ico的设置
一.什么是favicon.ico Favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹和地址栏网站网址前面的个性化图标,常被成为网页小图标.网站缩略图标或者 ...
- 为网站添加favicon.ico图标
前言 貌似每次都是等到网站快收尾时才做favicon.ico的,这次也不例外.这年代…… 步骤 1.PS制作正方形图标,格式为jpg.jpeg.gif或png. 2.将图标转换为ICO格式,网上有很多 ...
随机推荐
- Swift - 添加、修改、删除通讯录联系人
使用AddressBook.framework框架,我们除了可以很方便的获取通信录里的联系人.同时,还能对通讯录进行新增.修改.删除联系人操作. (注意:这些操作同查询一样,首先需要发起授权请求) 1 ...
- 最短路径A*算法原理及java代码实现(看不懂是我的失败)
算法仅仅要懂原理了,代码都是小问题,先看以下理论,尤其是红色标注的(要源代码请留下邮箱,有測试用例,直接执行就可以) A*算法 百度上的解释: A*[1](A-Star)算法是一种静态路网中求解最短路 ...
- Netduino开篇
很久没写博客了,最近看到一些朋友,如一直在做micro framework的叶帆,如成都智能盒子公司的奈何他们一直在为物联网做着技术推广工作.为了及时向他们学习,俺也写写一些博客,做一下简单的技术推广 ...
- 杭电OJ_DIY_YTW2_1001 A Mathematical Curiosity
Problem Description Given two integers n and m, count the number of pairs of integers (a,b) such tha ...
- Java中@Deprecated、@SupressWarning、@Override的作用
Annotation注解在 Java 中有着很广泛的,他是做为一种标识 为javac所识别.每一个注解 都对应这一个Java类 在java.lang包中 有三个注解 分别是 Deprecated ...
- PDCA模型的学习
PDCA是广泛应用于质量控制中的一种管理学模型. P即plan,分析和了解当前的状况,然后作出改进的计划: D即do,执行所作出的计划: C即check,对执行的结果进行检查,要确认哪些是对的,哪些是 ...
- android使用xfire webservice框架远程对sqlserver操作(包括增删改查)的实例!!已在真机上试验通过
前两天,公司有一个利用android远程操作sqlserver的项目,对此我是毫无头绪的,但也挺感兴趣的,于是开始上网搜索方法,网上有挺多方法了,发现使用webservice的挺多的,不过我对这些技术 ...
- TPL异步并行编程之回调
Task是基于ThreadPool线程池基础上的高度异步多线程编程,如果有一天我希望一个需要长时间运行的Task,在被某些异常终止后还能回调一些代码就可以知道Task终止的原因了吧 是的,且看代码 p ...
- Shell 基本运算符
Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 ...
- java中遍历MAP,嵌套map的几种方法
java中遍历MAP的几种方法 Map<String,String> map=new HashMap<String,String>(); map.put("us ...