随便打开一个网页：比如 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++概述

    理论练习题 C++语言与C语言的本质区别是什么? [參考答案]:C++与C语言的本质区别就在于C++是面向对象的.而C语言是面向过程的. 面向过程的程序设计方法与面向对象的程序设计方法在对待数据和函数 ...

  2. vim: 远程登陆服务器时可能出现的: 方向键，回退符不能正常使用

    Solution of:远程登陆服务器时可能出现的: 方向键,回退符不能正常使用 远程登陆服务器,可能出现:方向键,回退符不能正常使用. 解决方法:在家目录下的.cshrc中添加set nocompa ...

  3. fzu 2035 Axial symmetry(枚举+几何）

    题目链接:fzu 2035 Axial symmetry 题目大意:给出n个点,表示n边形的n个顶点,判断该n边形是否为轴对称图形.(给出点按照图形的顺时针或逆时针给出. 解题思路:将相邻两个点的中点 ...

  4. Android Folding View（折叠视图、控件）

    版本号:1.0 日期:2014.4.21 版权:© 2014 kince 转载注明出处 非常早之前看过有人求助以下这个效果是怎样实现的,   也就是側滑菜单的一个折叠效果,事实上关于这个效果的实现,谷 ...

  5. OS X 10.10 Yosemite Beta能够下载了

    刚刚启动迅雷.蹦出一消息.点击后出现-- watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdmlzdGE5OTk5OQ==/font/5a6L5L2T/fon ...

  6. Eclipse 乱码问题 修改设置

    1.工作空间的字符编码设置 2.对于任意的项目,可以右键选择属性,然后修改 3.对于任意一个文件,同样的操作,右键选择属性,然后配置字符编码

  7. MFC 直线 虚线 折线 圆 椭圆 矩形 弧形

    ****Dlg.h头文件加入: //为project加入画笔.点变量数组 public: CPen m_pen[5]; CPoint m_point[5]; public: void DrawLine ...

  8. Eclipse在点击运行后不能自动保存的解决

    今天在eclipse上写程序调试时,发现当我点击运行按键之后,并不能在运行前帮我自动保存,也就是说每次修改代码之后, 运行的还是前一次运行之前的代码,并不是修改之后的代码,因此通过在网上搜索解决方案之 ...

  9. ABP启动配置

    ABP启动配置   返回ABP系列 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行 ...

  10. 无法安装vmware tools的解决方PLEASE WAIT! VMware Tools is currently being installed on your system. Dependin

    VMware安装unbuntu 12.04 LTS时,当你使用VMware的Easy Mode安装时,提示须要安装VMware Tools,屏幕会出现下方的文字: installed unbuntu ...