favicon.ico的兩三事

時間 2019-11-18

標籤 favicon.ico favicon ico 兩三简体版

原文原文鏈接

隨便打開一個網頁：好比 http://www.baidu.com/ html

能夠看到在瀏覽器的標籤頭上面顯示了一個圖標，這個圖標是：，也就是咱們常說的favicon.ico. web

因爲這篇文章主要討論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. google

firefox: spa

ie9: firefox

惋惜的是普通用戶用的基本上是360瀏覽器，搜狗瀏覽器,qq瀏覽器等。 code

搜狗瀏覽器： xml

能夠知道，咱們在網站根目錄下面的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 的時候會忽略端口號的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。