关于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" />

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

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

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

关于favicon.ico相关推荐

不能忽略的Nginx做web服务器的favicon.ico图像找不到问题
我们在使用Nginx搭建HTTP的web server的过程中,一般都很顺利,默认的网站根目录一般是/usr/local/nginx/html,我们也可以正常访问到Nginx的欢迎信息,比如使用下面的 ...
Spring-Boot：写出来的网站访问不到静态资源？怎样通过url访问SpringBoot项目中的静态资源？localhost:8989/favicon.ico访问不了工程中的图标资源？
Spring-Boot:Spring-Boot写出来的网站访问不到静态资源?怎样通过url访问SpringBoot项目中的静态资源?localhost:8989/favicon.ico访问不了工程中的 ...
favicon.png vs favicon.ico - 我为什么要使用PNG而不是ICO？
除了PNG是一种更常见的图像格式之外,是否有任何技术理由支持favicon.png与favicon.ico? 我支持所有支持PNG最爱图标的现代浏览器. #1楼一些社交工具(如Google+)使用一 ...
nginx忽略favicon.ico日志
说明: favicon.ico占用nginx error_log日志大量信息,把我们真正需要查看的日志给覆盖.因此这里,我们通过log_not_found off关闭它. 实现: //把以下配置放到 ...
favicon自动获取_友情链接前面自动获取并添加favicon.ico小图标
之前看到可风博客底部友情链接都加了ico小图标,感觉很新颖,很好看.于是乎我也开始折腾,我不想每次添加友情链接的时候都得手动的去添加ico图标的小链接,浪费时间,然后就百度了以下,还真有教程,然后我就 ...
Java 技术篇 - 前端浏览器发送一次url请求后端ServerSocket接收到两次请求原因及解决方法，GET /favicon.ico HTTP/1.1问题处理
效果图如下: 前端发送一次请求,后端接收到两次,第二次是:GET /favicon.ico HTTP/1.1 可以看到页签上标题栏前面是个地球,这个是默认的. 原因就是后台给的响应里没有指定这个图标, ...
【SpringBoot】添加自定义浏览器图标 favicon.ico
让 SpringBoot 的 Favicon 生效在 head 标签中添加: (th:href是使用了thymeleaf模板引擎,普通HTML直接写href即可) <link rel=&quo ...
在基于Spring MVC的应用程序中配置favicon.ico
Favicon是与您的网站相关的图标(favicon.ico). 并非每个网站都在使用favicon. 但是大多数浏览器并不关心它,反正他们都要求它. 当图标图标不在适当位置时,服务器将返回不必要的4 ...
「工具」PWA Manifest图标及 favicon.ico 生成工具
PWA 其中有一个能力就是把网站安装到系统桌面,以原生应用的体验来运行网站,使用户无需再找开浏览器输入网址进入网站,而是可以直接点击安装好的应用直接运行,给使网站访问缩短路径及增加网站的曝光度. 其中 ...
解决http://localhost:3000/favicon.ico 的404 问题（含案例解析）
文章目录解决 http://localhost:3000/favicon.ico 的404 问题解决办法: 解决 http://localhost:3000/favicon.ico 的404 问题 ...

关于favicon.ico

关于favicon.ico相关推荐

最新文章

热门文章