favicon.ico

favicon.ico

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

基本介紹

  • 中文名:網站頭像
  • 外文名:Favorites Icon
  • 英文簡寫:favicon
  • 製作:相對簡單 常用的有三種
  • 調用原理:先在網頁所在目錄尋找此檔案
  • 更新:瀏覽器不同更新方法不同
概述,製作,網頁上調用,更新,

概述

中文名稱是網站頭像。在我們的網站建設中,為網站打造一個契合網站主題的個性化標誌則是必需的,這直接關係到能否成功地塑造網站的品牌。這從某些角度看仍在網站推廣的範疇之內,而欲取得成功,不僅包括良好的頁面設計、令人印象深刻的網站Logo,也包括favicon。
favicon.ico圖示是網站的縮略標誌,可以顯示在瀏覽器標籤、地址欄左邊和收藏夾,是展示網站個性的縮略logo標誌,也可以說是網站頭像,如果要讓網站看起來更專業、更美、更有個性,favicon.ico是必不可少的,所以你在本站使用ICO圖示轉換工具就可以輕鬆達到你的要求。
favicon顯示位置favicon顯示位置
從特定的技術角度看,favicon也並不只是僅僅讓網站給人更專業的觀感,也可以在一定程度上減輕伺服器的流量頻寬占用,一般為了提高網站的可用性,我們都會為自己的網站創建一個自定義的404錯誤檔案,在這種情況下,如果網站沒有相應的favicon.ico檔案,每當有用戶收藏網站/網頁時, Web伺服器都會調用這個自定義的404檔案,並在網站的錯誤日誌中記錄。這顯然是應該予以避免的。

製作

製作Favicon.ico的方法相當簡單,常用的Favicon.ico圖示有3種16×16、32×32、48×48。首先,利用圖形工具創建2個反映網站主題的256色的小圖片:1個為32×32像素,另一個為16 ×16像素。需要注意的是,調色板要選用“Windows 默認調色板”,不然,在最終的效果展示中圖形可能會發生迥異於您初衷的顏色上變化。
需要說明的是,在很多關於Favicon.ico的說明中,常見到要求圖片為16色的說法,應該說這類說法大大過時:在早期如Windows 95時期,16色的Favicon.ico可能是個穩妥的選擇,保證其在大多數情況下正常使用,但到Windows XP後,完全不存在那類限制,16色只能使圖示的展示效果大大降低。
至於在瀏覽器中使用時16×16像素的圖片已經足夠,為什麼還要準備32×32像素的圖片,原因在於,正如上文所言,favicon也顯示在地址欄中,用戶可以拖曳favicon到桌面以建立到網站的捷徑,而桌面圖示則要以32×32顯示的,如果您的Favicon.ico不包括32像素的圖片,系統就只能使用默認的瀏覽器圖示來標註網站/網頁,如Internet Explorer的藍色“e”,起不到我們意欲通過Favicon.ico打造網站品牌的作用。
圖片製作好後,使用如Image2Ico之類的小程式或者其他線上生成ico的網站即可將2張圖片轉換到一個Icon檔案中。

網頁上調用

瀏覽器調用favicon的原理是首先在網頁所在目錄尋找favicon.ico檔案,如果沒有找到就去網站的根目錄尋找。所以最簡單的方法就是將製作好的favicon檔案命名為favicon.ico然後上傳到網站的根目錄下。
如果您需要將Favicon.ico放到其他目錄下,或者希望讓不同的網頁顯示不同的Favicon,就需要在網頁Html檔案中做設定了,具體設定也很簡單,在Html中的<head>部分加入如下的代碼:
<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >
含義:在瀏覽器標籤中顯示favicon,在收藏夾中顯示favicon。
除此之外,Firefox還支持GIF動畫格式的Favicon,使用方法如下:
首先製作一個16*16的gif動畫,然後在html代碼<head></head>中加入如下代碼:
程式代碼 <link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >即可。

更新

favicon.ico如何更新? 如何更新favicon.ico圖示,因為本地瀏覽器存在的快取可能無法及時更新favicon.ico圖示。 關閉所有打開的瀏覽器,並清空瀏覽器快取
打開網站並加入收藏夾。 關閉瀏覽器,重新打開網站,就更新了。 若此時還未更新favicon.ico圖示,請稍等一會再打開瀏覽嘗試。
如果是用360瀏覽器,無法更新,清除快取的地址是C:\Documents and Settings\Administrator\Application Data\360se\data\ico,這個位置記錄你所瀏覽的網站的ico,刪除你想更新的ico檔案就好了,關掉瀏覽器,重新打開網站就更新了。
如果使用的火狐或者chrome瀏覽器,則更新更加簡單,使用火狐和chrome的隱私模式進行瀏覽即可更新快取。

相關詞條

熱門詞條

聯絡我們