芜湖尾敢投资有限公司

Favicon.ico瀏覽器圖標文件制作和正確使用——墨澀網(wǎng)

favicon圖標介紹

所謂favicon,即Favorites Icon的縮寫,顧名思義,便是其可以讓瀏覽器的收藏夾中除顯示相應(yīng)的標題外,還以圖標的方式區(qū)別不同的網(wǎng)站。當然,這不僅僅是Favicon的全部,根據(jù)瀏覽器的不同,F(xiàn)avicon顯示也有所區(qū)別:在大多數(shù)主流瀏覽器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不僅在收藏夾中顯示,還會同時出現(xiàn)在地址欄上,這時用戶可以拖曳favicon到桌面以建立到網(wǎng)站的快捷方式;除此之外,標簽式瀏覽器甚至還有不少擴展的功能,如FireFox甚至支持動畫格式的favicon等。圖標文件一般尺寸較小,常見的是16*16,32*32和48*48。圖標是部分透明的,可以直接打開瀏覽。

墨澀網(wǎng)favicon圖標

如何使用Favicon.ico?

1. 將成功生成的圖標文件下載并改名為favico.ico,上傳到網(wǎng)站根目錄。
2. 在網(wǎng)站首頁的源文件 head 之間插入下面的代碼:

<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="bookmark" href="/favicon.ico"/>

制作ico圖標

一:手動制作

.可以手動用ps等軟件制作尺寸為6*16,32*32和48*48像素的png格式圖片,然后再用格式工廠等軟件轉(zhuǎn)換圖片格式為ico格式。

二:在線制作

我們也可以在線制作,推薦兩個在線制作的網(wǎng)站。

http://www.bitbug.net/

http://www.faviconico.org/

操作很簡單,上傳自己喜歡的圖片點擊制作即可,完成后下載即可使用。

如何創(chuàng)建動態(tài)ico圖標

先把做好的gif動態(tài)圖標命名為favicon.gif,然后再 head 之間加上:

<link rel="icon" href="/favicon.gif" type="image/gif" />

注意

強烈推薦使用.ico而不是使用png或者gif

1. 最重要的就是,所有的瀏覽器,包括IE5,都支持ico文件,gif、png等都沒有ico支持范圍廣
2. 如果有favicon.ico,服務(wù)器的404錯誤會有友好返回,我們測試了所有現(xiàn)代瀏覽器(測試了 Chrome 4, Firefox 3.5【火狐】, IE8, Opera 10 and Safari 4),發(fā)現(xiàn)他們都會請求favicon.ico,這樣錯誤頁就會有對應(yīng)圖標顯示,所以最好用ico!
3. 一個.ico文件可以同時滿足多個尺寸的需求,不需要每個尺寸單獨生成一個文件。

THE END