原文： http://hi.baidu.com/hebo_thu/item/fc8c81bb164f5cee4fc7fd90
tomcat與地址欄圖標(biāo)之研究（多瀏覽器）
最近在做一個java網(wǎng)絡(luò)應(yīng)用程序，服務(wù)器是tomcat。在默認(rèn)情況下，當(dāng)用戶訪問該網(wǎng)絡(luò)應(yīng)用時，地址欄圖標(biāo)顯示為tomcat貓。我希望把它換成自己的圖標(biāo)，于是研究了一下。在研究過程中，我發(fā)現(xiàn)網(wǎng)上的資料大都語焉不詳，于是把自己的研究結(jié)果分享出來。本文的測試環(huán)境為：
tomcat?6.0.20 IE6?SP3 Firefox?3.6.13 搜狗高速瀏覽器?2.2.0 360安全瀏覽器?3.6.1 傲游瀏覽器?2.5.17
首先說明一下，我這個程序的用戶一般使用的是基于IE6內(nèi)核的外殼瀏覽器，比如搜狗高速瀏覽器、360安全瀏覽器和傲游瀏覽器等，也有少數(shù)的用戶使用Firefox，所以我測試的瀏覽器主要就是這幾款瀏覽器。至于其它的數(shù)得上號的瀏覽器，我猜本文提供的方法也能夠大體上適用。不過這也僅僅是猜測，如果說得不對，還請見諒或者指出。
下面分析一下各個瀏覽器對于地址欄圖標(biāo)的緩存機(jī)制。為什么要分析這個呢？因?yàn)樵诖蠖鄶?shù)情況下，如果不清空地址欄圖標(biāo)的緩存，那么即使改變了服務(wù)器端設(shè)置的地址欄圖標(biāo)，在瀏覽器端也不會立刻反映出來，這就給測試帶來了困難。而瀏覽器們對于地址欄圖標(biāo)的緩存機(jī)制又不盡相同，因此有必要逐個加以分析。
IE6和Firefox的緩存機(jī)制相對簡單，即地址欄圖標(biāo)與其它需要緩存的數(shù)據(jù)存放在同一位置，因此一般的清空緩存操作對地址欄圖標(biāo)同樣適用。但是，基于IE內(nèi)核的三款瀏覽器卻把地址欄圖標(biāo)與其它需要緩存的數(shù)據(jù)分開存放，必須使用手動的方法進(jìn)行清除。
搜狗高速瀏覽器把地址欄圖標(biāo)緩存在用戶目錄下的Application?Data/SogouExplorer/FavIcon文件夾中，其中主要起作用的是FavorIcon.db這個文件，此外還有一系列叫做s*.ico的文件，這些文件是在“最常訪問欄”等處用到的圖標(biāo)文件。清空搜狗高速瀏覽器的地址欄圖標(biāo)的緩存較為麻煩，因?yàn)镕avorIcon.db文件似乎必須在搜狗高速瀏覽器關(guān)閉的情況下才能刪除，因此推薦的方法是，在搜狗高速瀏覽器的“隱私保護(hù)”那里把所有緩存數(shù)據(jù)都刪除，然后關(guān)閉搜狗高速瀏覽器，再把FavIcon文件夾中的所有文件都刪除（清空緩存數(shù)據(jù)后，搜狗高速瀏覽器的“最常訪問欄”等處也被清空了，所以那些s*.ico也就沒用了）。然后再打開搜狗高速瀏覽器，這樣就算是清空了地址欄圖標(biāo)的緩存。
360安全瀏覽器又是另一種情況。它把地址欄圖標(biāo)緩存在用戶目錄下的Application?Data\360se\data\ico文件夾中，以“站點(diǎn)名.ico”為名保存起來。所以只要找到對應(yīng)的ico文件，刪除了就可以了。但是有一點(diǎn)需要注意，假如站點(diǎn)名包含端口信息，比如“127.0.0.1:8080”，那么它的緩存文件就會是一個空文件，而且瀏覽器也只會在地址欄里顯示默認(rèn)的綠e圖標(biāo)。我猜這是360安全瀏覽器的某種bug，因?yàn)樵赪indows系統(tǒng)下文件名里是不能含有冒號的，所以說不定就是這樣。而不包含端口信息的站點(diǎn)，也就是端口為默認(rèn)的80的站點(diǎn)，比如“127.0.0.1”，是不存在這樣的問題的。
傲游瀏覽器把地址欄圖標(biāo)緩存在安裝目錄的Favicons文件夾中，但是文件名是自動生成的。如果你能找到對應(yīng)的文件，那么刪除了就可以了。如果找不到或者懶得找，那么把Favicons文件夾中的所有文件都刪除了也就是了。
除了清空瀏覽器的地址欄圖標(biāo)的緩存以外，還有一種辦法可以繞過這個問題，那就是改變tomcat的服務(wù)端口然后重啟tomcat。在測試過程中，這個辦法可以同時對付多個瀏覽器，所以還是比較方便的。只不過由于上面提及的原因，這個辦法不能很好地兼顧360安全瀏覽器。
下面進(jìn)入正題，如何替換tomcat的貓圖標(biāo)。我首先嘗試的方法是在應(yīng)用程序的web.xml里加入這么一段：
<icon> ??<small-icon>/images/small.gif</small-icon> ??<large-icon>/images/large.gif</large-icon> </icon>
其中/images/small.gif和/images/large.gif是我制作的兩個gif文件，大小分別為16×16像素和32×32像素。但是這個方法不管用，原因不知道。如有知道的兄者，還請賜教。
然后我又進(jìn)行了各種各樣的嘗試，發(fā)現(xiàn)了兩種管用的方法。這兩種方法各有利弊。
方法一，修改整個tomcat的配置。
首先制作一個名為favicon.ico的圖標(biāo)文件，然后進(jìn)入tomcat的webapps下的ROOT目錄，把其中的favicon.ico替換成自己的。注意以下幾點(diǎn)：
1.?favicon.ico應(yīng)該為16×16像素或32×32像素，8位色（256色）或24位色。
2.?據(jù)說favicon.ico有大小的限制，上限為1.22K[?]。不過據(jù)我觀察，超過1.22K也沒關(guān)系。比如Firefox官方網(wǎng)站上的favicon.ico大小為2.49K，我保存下來放到tomcat的webapps下的ROOT目錄里，照樣能正常顯示。
3.?據(jù)說需要修改tomcat的conf下的web.xml，在其中加入這么一段：
<mime-mapping> ??<extension>ico</extension> ??<mime-type>image/x-icon</mime-type> </mime-mapping>
其實(shí)這段的主要作用在于當(dāng)用戶通過瀏覽器請求后綴名為.ico的資源時，tomcat告知瀏覽器該資源的媒體類型，以指導(dǎo)瀏覽器適當(dāng)?shù)卦陲@示區(qū)域展現(xiàn)該資源。而對于地址欄的圖標(biāo)數(shù)據(jù)，即使不特別指定媒體類型，瀏覽器應(yīng)該也有能力處理。反正據(jù)我觀察，加不加這段話對于地址欄圖標(biāo)的顯示來說效果是一樣的。
4.?據(jù)說除了覆蓋favicon.ico以外，還要把同目錄下的tomcat.svg也搞掉。不過據(jù)我觀察，搞不搞掉它效果是一樣的。
使用這個方法后，各個瀏覽器的顯示效果如下： @?IE6只在地址欄顯示那個一如既往的e圖標(biāo)，但是保存到收藏夾后可以看到效果。實(shí)際上，當(dāng)訪問百度之類的網(wǎng)站時，IE6也不在地址欄那里顯示百度的圖標(biāo)，因此我也不指望能比百度做得更好。 @?Firefox在地址欄顯示更改后的圖標(biāo)。 @?搜狗高速瀏覽器在地址欄顯示更改后的圖標(biāo)。 @?360安全瀏覽器在地址欄顯示更改后的圖標(biāo)。 @?傲游瀏覽器在地址欄顯示更改后的圖標(biāo)。
方法二，修改應(yīng)用程序的頁面。
在每個顯示在頂層窗口的網(wǎng)頁里的<head></head>里加入這么一段：
<link?rel="icon"?href="/***/my.ico"?type="image/x-icon"?/> <link?rel="shortcut?icon"?href="/***/my.ico"?type="image/x-icon"?/> <link?rel="bookmark"?href="/***/my.ico"?type="image/x-icon"?/>
注意以下幾點(diǎn)：
1.?有人說href必須是絕對路徑，其實(shí)沒必要。相對路徑一樣OK。而且文件名不一定是favicon.ico，可以自由地命名。而且也不一定是本地路徑，任何可用的路徑都可以，比如http://www.mozilla.com/favicon.ico。
2.?據(jù)說rel="shortcut?icon"代表地址欄圖標(biāo)，rel="bookmark"代表收藏夾圖標(biāo)。不過似乎也不能一概而論，比如對于Firefox來說，rel="shortcut?icon"是代表地址欄圖標(biāo)沒錯，rel="icon"卻是在收藏夾里起作用的那一個，rel="bookmark"不起任何作用。但是對于其它瀏覽器來說情況又有所不同，所以比較妥當(dāng)?shù)淖龇ㄊ前堰@三個都寫上，然后指向同一個文件。
3.?據(jù)說需要修改tomcat的web.xml或者應(yīng)用程序的web.xml，在其中加入這么一段：
<mime-mapping> ??<extension>ico</extension> ??<mime-type>image/x-icon</mime-type> </mime-mapping>
不過據(jù)我觀察，應(yīng)該也是用不著。
使用這個方法后，各個瀏覽器的顯示效果如下： @?IE6，地址欄顯示e圖標(biāo)，收藏夾顯示更改后的圖標(biāo)。 @?Firefox在地址欄顯示更改后的圖標(biāo)。 @?搜狗高速瀏覽器在地址欄顯示tomcat貓。 @?360安全瀏覽器在地址欄顯示tomcat貓。 @?傲游瀏覽器在地址欄顯示更改后的圖標(biāo)。
換一種說法，搜狗高速瀏覽器和360安全瀏覽器只買方法一的賬，其它三款瀏覽器既買方法一的賬也買方法二的賬。如果同時使用方法一和方法二，則方法二的優(yōu)先級更高（因?yàn)閠omcat貓就是方法一的默認(rèn)圖標(biāo)）。
這兩種方法各有千秋。我比較喜歡方法一，理由是簡單方便，而且測試全數(shù)通過。缺點(diǎn)是修改了整個tomcat的配置，影響了其中運(yùn)行的所有應(yīng)用程序的地址欄圖標(biāo)。不過如果這些應(yīng)用程序本來就應(yīng)該使用同一地址欄圖標(biāo)的話（比如某家公司的全部應(yīng)用程序都使用該公司的logo作為圖標(biāo)），那就不成為問題。方法二的主要問題在于不被搜狗高速瀏覽器和360安全瀏覽器所支持，而且需要改動所有顯示在頂層窗口的頁面，有些麻煩。不過我覺得方法二代表了地址欄圖標(biāo)的發(fā)展方向，雖然目前不被搜狗高速瀏覽器和360安全瀏覽器所支持，但是說不定將來就會被支持。而且雖然要改動很多頁面是有點(diǎn)麻煩，不過只拷貝粘貼幾行代碼的話，其實(shí)也算不了什么。況且方法二有一個很大的優(yōu)點(diǎn)，就是可以在不影響其它應(yīng)用程序的情況下改動tomcat中的某個應(yīng)用程序，這點(diǎn)是方法一所不具備的。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
