關(guān)于favicon.ico的兩三事
隨便打開一個(gè)網(wǎng)頁(yè)：比如 http://www.baidu.com/
可以看到在瀏覽器的標(biāo)簽頭上面顯示了一個(gè)圖標(biāo)，這個(gè)圖標(biāo)是：
由于這篇文章主要討論favicon.ico,以及各個(gè)瀏覽器對(duì)其的不同處理，所以還是新建web項(xiàng)目如下：
home.html 代碼如下： <!DOCTYPE html> <html xmlns="http://www./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的圖標(biāo)了： <link rel="icon" href="Images/wangyi.ico" type="image/x-icon" /> <link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
基本上所有的現(xiàn)代瀏覽器都支持這種寫法，例如firefox，ie9. firefox: ie9:
可惜的是普通用戶用的基本上是360瀏覽器，搜狗瀏覽器,qq瀏覽器等。 搜狗瀏覽器： 可以知道，我們?cè)诰W(wǎng)站根目錄下面的favicon.ico 起作用了，所以顯示的是網(wǎng)站根目錄下面的favicon.ico 圖標(biāo)。 打開360瀏覽器： 奇怪了，google的圖標(biāo)哪里來的。。。。？？？ 我們的faviconTestWeb 只有3個(gè)圖標(biāo)，一個(gè)是wangyi.ico.baidu.ico.favicon.ico(cnblogs的圖標(biāo))。 為什么使用360顯示的是google的圖標(biāo)？
其實(shí)360瀏覽器在瀏覽網(wǎng)頁(yè)的時(shí)候，它會(huì)忽略端口，也就是說http://localhost:3529/home.html， firefox請(qǐng)求的是：link 的href所對(duì)應(yīng)的圖標(biāo)。 搜狗瀏覽器等：請(qǐng)求的是http://localhost:3529/favicon.ico. 360瀏覽器等：請(qǐng)求的是http://localhost/favicon.ico, 也就是不管你請(qǐng)求的是http://host/home.html,還是http://host:333/home.html,還是http://host/test/home.html. 它請(qǐng)求的都是http://host/favicon.ico.
證據(jù)就是打開360se的安裝目錄：
所以如果你的網(wǎng)站favicon.ico 不起作用，或者是想要讓favicon.ico 的兼容性更好，要使用下面幾個(gè)步驟： 1：檢查網(wǎng)站根目錄下面的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：如果你的網(wǎng)站帶端口，或者是測(cè)試版本的話，那么尤其要注意360等瀏覽器，它們?cè)谡?qǐng)求favicon.ico 的時(shí)候會(huì)忽略端口號(hào)的。 |
|
|
