随便打开一个网页：比如 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" />

使用的是http://host/favicon.ico

3：如果你的网站带端口，或者是测试版本的话，那么尤其要注意360等浏览器，它们在请求favicon.ico 的时候会忽略端口号的。

顺便推荐一篇文章：[架站] 為什麼網站的根目錄最好有 favicon.ico 和 robots.txt 存在？

打个广告：ico图标在线制作：http://www.faviconico.org/

http://blog.csdn.net/zhizaibide1987/article/details/42001955

网页favicon.ico图标设置（转）的更多相关文章

  1. 让网站不去请求favicon.ico图标

    让网站不去请求favicon.ico图标 favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404.出于优 ...

  2. Tomcat修改favicon.ico图标，Linux下Tomcat修改favicon.ico图标，Tomcat更换favicon.ico图标

    Tomcat修改favicon.ico图标,Linux下Tomcat修改favicon.ico图标,Tomcat更换favicon.ico图标 >>>>>>> ...

  3. 织梦CMS站点favicon.ico图标的放置

    1.在线制作一个ico图标,推荐制作网站:http://ico.55.la/.制作好后,将favicon.ico图标放在站点模板默认目录下的images文件夹里. 2.在index.htm的<h ...

  4. 那么如何添加网站favicon.ico图标

    1.  获得一个favicon.ico的图标,大小为16px×16px最为合适 2. 将制作好的图标文件Favicon.ico上传到网站的根目录: 3. 在首页文件的html代码的头部中加入如下代码: ...

  5. java web项目修改favicon.ico图标的方式

    1.修改整个项目的tomcat图标 找到tomcat的根目录(tomcat-webapps-ROOT目录),然后将修改的favicon.ico图标覆盖掉本地的图标,然后再重启项目,刷新,清除浏览器缓存 ...

  6. 制作 Favicon.ico 图标教程

    摘要:有一些站长认为 favicon.ico 图标对于一个网站没有什么作用.甚至有一些站长认为,少加载一个图片,页面设计展现的速度更快些.的确,理论上是对的,但乐猪认为这种想法是肤浅的!有这种想法的站 ...

  7. 网站favicon.ico 图标

    favicon.ico一般用于作为缩略的网站图标,它显示在浏览器的地址栏或者标签上.目前主要的浏览器都支持favicon.ico图标. 一.制作favicon图标 1.把图标切成png图片. 2.把p ...

  8. WEB网站的favicon.ico的设置

    一.什么是favicon.ico Favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹和地址栏网站网址前面的个性化图标,常被成为网页小图标.网站缩略图标或者 ...

  9. 为网站添加favicon.ico图标

    前言 貌似每次都是等到网站快收尾时才做favicon.ico的,这次也不例外.这年代…… 步骤 1.PS制作正方形图标,格式为jpg.jpeg.gif或png. 2.将图标转换为ICO格式,网上有很多 ...

随机推荐

  1. C#加密与解密

    密码加密之类的用处,直接复制黏贴,可用 1.加密的代码: /// <summary> /// DEC 加密过程 /// </summary> /// <param nam ...

  2. Winfrom设置DataGridView单元格获得焦点（DataGridView - CurrentCell）

    设置DataGridView单元格获得焦点 this.dgv_prescription.BeginEdit(true);

  3. Boost::thread库的使用

    阅读对象 本文假设读者有几下Skills [1]在C++中至少使用过一种多线程开发库,有Mutex和Lock的概念. [2]熟悉C++开发,在开发工具中,能够编译.设置boost::thread库. ...

  4. C++ template error: undefined reference to XXX

    一般来说,写C++程序时推荐“类的声明和实现分离”,也就是说一个类的声明放在example.h文件中,而这个类的实现放在example.cpp文件中,这样方便管理,条理清晰. 但是如果类的声明用到了模 ...

  5. biz处理dao事务处理层

    前言 正文 1.创建一个事物管理对象,该对象将连接对象绑定到当前线程 2.dao层的代码演示样例 3.biz层处理数据库的事务 总结

  6. webdynpro tree控件使用

    1.  首先创建一个TREE控件 2.  在Tree下面创建一个TREE  NODE  TYPE ,node type 是可以继续展开的,而Item type是无法展开的. 3. 创建node.,下面 ...

  7. hbulider mui框架

    1.webview http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle http://www.dcl ...

  8. webpack React+ES6

    webpack踩坑之路——构建基本的React+ES6项目   webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的 ...

  9. mysql dump 参数

    mysql dump 参数: -R, --routines Dump stored routines (functions and procedures). 备份 函数和存储过程: -E, --eve ...

  10. java.lang.NoSuchMethodError: org.springframework.beans.factory.annotation.InjectionMetadata.<init>(L

    关于错误: java.lang.NoSuchMethodError: org.springframework.beans.factory.annotation.InjectionMetadata.&l ...