About Favicon.ico

Open a webpage casually: like http://www.baidu.com/

You can see that an icon is displayed in the browser's header, which is the favicon.ico that we often say.

Since this article focuses on Favicon.ico, and the different ways each browser handles it, the new Web project is as follows:

The home.html code is as follows:

<! DOCTYPE html>
 

The following two lines of code tell the browser to use Wangyi.ico as the home.html icon:

<link rel= "icon" href= "Images/wangyi.ico" type= "Image/x-icon"/>
<link rel= "shortcut icon" href= "images/ Wangyi.ico "type=" Image/x-icon "/>
 

Basically all modern browsers support this notation, such as FIREFOX,IE9.

Firefox

IE9:


Unfortunately, the average user is basically 360 browser, Sogou browser, QQ browser and so on.

Sogou Browser:

As you can see, the favicon.ico that we have in the root directory of the Web site is working, so the favicon.ico icon below the root of the website is displayed.

Open 360 Browser:

Strange, where does Google's icon come from ...?

Our favicontestweb has only 3 icons, one is Wangyi.ico.baidu.ico.favicon.ico (Cnblogs's icon).

Why use 360 to display Google's icons.


In fact, 360 browser when browsing the web, it will ignore the port, that is to say http://localhost:3529/home.html,

The Firefox request is: the icon corresponding to the href of link.

Sogou Browser, etc.: the request is Http://localhost:3529/favicon.ico.

360 Browser, etc.: the request is Http://localhost/favicon.ico,

That is, whether you are asking for http://host/home.html, or http://host:333/home.html, or http://host/test/home.html.

All it asks for is Http://host/favicon.ico.


The proof is to open the 360SE installation directory:




So if your site Favicon.ico doesn't work, or if you want to make Favicon.ico more compatible, use the following steps:

1: Check the site root directory under the Favicon.ico, that is: Http://host/favicon.ico., not Http://host/some/favicon.ico.

2: Ensure <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"/>

It's Http://host/favicon.ico.

3: If your site is with a port, or a beta version, pay particular attention to the 360 browsers, which ignore the port number when requesting favicon.ico.


By the way, recommend an article: [Rack Station] Why the Web site's root record is best to have favicon.ico and robots.txt exist.