Favicon.ico瀏覽器圖標文件製作和正確使用

2019-09-27   圖釘DIY

favicon圖標介紹

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

今日頭條favicon圖標

如何使用Favicon.ico?

1. 將成功生成的圖標文件下載並改名為favico.ico,上傳到網站根目錄。

2. 在網站首頁的源文件 head 之間插入下面的代碼:



製作ico圖標

一:手動製作

.可以手動用ps等軟體製作尺寸為6*16,32*32和48*48像素的png格式圖片,然後再用格式工廠等軟體轉換圖片格式為ico格式。

二:在線製作

我們也可以在線製作,推薦兩個在線製作的網站。

\thttp://www.bitbug.net/
\thttp://www.faviconico.org/

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

如何創建動態ico圖標

先把做好的gif動態圖標命名為favicon.gif,然後再 head 之間加上:


注意

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

1. 最重要的就是,所有的瀏覽器,包括IE5,都支持ico文件,gif、png等都沒有ico支持範圍廣

2. 如果有favicon.ico,伺服器的404錯誤會有友好返回,我們測試了所有現代瀏覽器(測試了 Chrome 4, Firefox 3.5【火狐】, IE8, Opera 10 and Safari 4),發現他們都會請求favicon.ico,這樣錯誤頁就會有對應圖標顯示,所以最好用ico!

3. 一個.ico文件可以同時滿足多個尺寸的需求,不需要每個尺寸單獨生成一個文件。