關(guān)于favicon.ico的兩三事(最好就是放根目錄)

隨便打開一個網(wǎng)頁:比如 http://www.baidu.com/
可以看到在瀏覽器的標簽頭上面顯示了一個圖標,這個圖標是:,也就是我們常說的favicon.ico.
由于這篇文章主要討論favicon.ico,以及各個瀏覽器對其的不同處理,所以還是新建web項目如下:
- <!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>
firefox:
ie9:
可惜的是普通用戶用的基本上是360瀏覽器,搜狗瀏覽器,qq瀏覽器等。
搜狗瀏覽器:
可以知道,我們在網(wǎng)站根目錄下面的favicon.ico 起作用了,所以顯示的是網(wǎng)站根目錄下面的favicon.ico 圖標。
打開360瀏覽器:
奇怪了,google的圖標哪里來的。。。。???
我們的faviconTestWeb 只有3個圖標,一個是wangyi.ico.baidu.ico.favicon.ico(cnblogs的圖標)。
為什么使用360顯示的是google的圖標?
其實360瀏覽器在瀏覽網(wǎng)頁的時候,它會忽略端口,也就是說http://localhost:3529/home.html,
firefox請求的是:link 的href所對應(yīng)的圖標。
搜狗瀏覽器等:請求的是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.
證據(jù)就是打開360se的安裝目錄:
所以如果你的網(wǎng)站favicon.ico 不起作用,或者是想要讓favicon.ico 的兼容性更好,要使用下面幾個步驟:
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" />
使用的是http://host/favicon.ico
3:如果你的網(wǎng)站帶端口,或者是測試版本的話,那么尤其要注意360等瀏覽器,它們在請求favicon.ico 的時候會忽略端口號的。
相關(guān)文章
html添加ico鏡像代碼(favicon.ico放在根目錄)
在index同級文件夾放一個favicon.ico 鏡像圖片,實現(xiàn)代碼如下,有需求的朋友可以參考下哈,希望對你有所幫助2013-05-08favicon.ico在ie下面無法正常顯示(尺寸32*32)
網(wǎng)上搜了一下,就想著會不會由于圖片大小尺寸的,現(xiàn)在放的是32*32的,于是換成16*16的,大小為1.12KB,在ie下面顯示正常了2013-05-02做網(wǎng)站別忘記Favicon.ico 為你的網(wǎng)站創(chuàng)建一個favicon
favicon就是出現(xiàn)在瀏覽器地址欄左側(cè)的那個小圖標,是Favorites Icon的縮寫,它可以讓瀏覽器的收藏夾中除顯示相應(yīng)的標題外,還以圖標的方式區(qū)別不同的網(wǎng)站2012-09-26網(wǎng)站地址欄前面的小圖標favicon.ico制作方法
有人也許會好奇,有的網(wǎng)址前面有個漂亮的小圖標而且有的網(wǎng)站圖標還會動,這是怎么做的呢?2010-01-27