如何設計FAVICON站點圖標

 

　　現代網頁設計中最令人沮喪和感到混亂的莫過於網站圖標了(favicon)，是“favorite icon”的簡稱。這枚小小的圖標一般出現在浏覽器的選項卡裡、地址欄處，根據我們操作系統和浏覽器的不同，還有可能出現在其他地方。

　　我先給大家科普下：favicon，即Favorites Icon的縮寫。favicon 就是出現在浏覽器地址欄左側的那個小圖標。favicon，中文名稱是網站頭像。當然，這不僅僅是Favicon的全部，根據浏覽器的不同，Favicon顯示也有所區別：在大多數主流浏覽器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不僅在收藏夾中顯示，還會同時出現在地址欄上，這時用戶可以拖曳favicon到桌面以建立到網站的快捷方式;除此之外，標簽式浏覽器甚至還有不少擴展的功能，如FireFox甚至支持動畫格式的favicon等。

　　由於他們不同尋常的文件格式和超級小的圖像尺寸使得設計師們在設計這些圖標時顯得很費勁。更加見鬼的是，人們有時候甚至糾結於這單詞的發音(我曾聽人說“fah-vee-con”和“fave-eye-con”,盡管前者更常見)。啊，穿過一切沒用的元素，直擊主題吧!

　　好文推薦：

　　第二彈!那些你不知道的PHOTOSHOP冷知識之乾坤大挪移

　　高手支招!怎樣分辨圖片是否被PS過

　　設計一枚favicon

　　創建標識是設計的第一步。一個好的favicon應該在本身小得如同表情的情況下捕獲網站的本質，並且在非常緊湊的空間裡傳達你的品牌。Favicon最常見的形式是該公司的商標標志(並非完整的標志與文字合並成的商標)。

　　(這些網站使用該品牌的標志,或至少接近它)

　　排除任何文本是一個好主意，畢竟這圖標是在太小了。不過也有例外，那就是標志性的標志標記文本。例如,維基百科使用公認的“W”而Facebook使用其眾所周知的「F」。

　　(這些圖標使用與該品牌密切關聯的一個字母。在這個例子中,你還會注意到,迪斯尼圖標出現失常。這是因為這截圖拍攝於視網膜顯示屏,他們只使用一個16×16圖標大小,而其他網站提供一個32×32大小和更多的細節。)

　　這些網站圖標們實在是太小了導致了每個像素都被計算在內。有時候直接把一個完整的logo縮小下來很容易造成圖標變得很模糊。所以，制作這些網站圖標時往往都是按照像素級別去設計。

　　(這是Facebook的logo被整合為32*32像素時的一部分，邊緣混淆而模糊，再一次證明像素級別的設計是很有必要的。)

　　在編輯圖標時，我喜歡用位圖軟件編輯。例如Photoshop或者Pixelmator就可以做出很棒的效果。我通常先調整我的大標志到64×64px,因為這是我需要的最大的圖標大小。接著我使用鉛筆工具編輯一次，知道像素圖標看起來很脆。這是一個非常繁瑣的過程,可能需要一兩個小時,但它會產生最好的結果。

　　一旦我把滿意的64×64px圖標做出來，我會按照原來的方法繼續做出32×32, 24×24和 16×16的圖標。下面是各尺寸對應的用途：

　　64×64 –Safari閱讀列表和Windows網站圖標

　　24×24 –固定在IE9

　　32×32 –高DPI或視網膜顯示屏往往會用到這個尺寸的圖標

　　16×16 – 在各種浏覽器中最常用的尺寸大小

　　你可能會發現要得到這些小圖標，通常通過調整64×64的就可以了，但往往會有更多的地方需要用到像素級別的編輯。記住如果你想調整這些小圖標的alpha值也是可以的。幾乎所有當下使用的浏覽器都支持透明小圖標。

　　保存favicon

　　我們做完所有尺寸的圖標後就可以保存了!在ps中使用“存儲為web所用格式”然後選擇png格式。接下來需要轉換png為ICO文件。我們把這些圖標再次統一放進一張大的png圖片裡。ICO並不是一個常用的格式，但是我們依然需要它。使用X-Icon編輯器可以很好地轉換之。這是一個免費的web在線工具，我們上傳自己的圖像然後導出合適大小的圖標。步驟非常簡單，跟著該網上的步驟指示就OK了。

　　(X-Icon可以讓我們很方便地根據網站指示上傳png格式的圖片然後導出ico格式的圖標，尺寸很豐富~)

　　給網站添加favicon

　　完成以上步驟後我們就可以把ico文件存到網站根目錄下了。現在我們在網站的頂級域名外加上“/favicon.ico”即可看到該圖標。比如http://example.com/favicon.ico。

　　幾乎每一個浏覽器都會自動查找網站根目錄下的favicon.ico文件然後顯示出來，所以不要將它藏在文件夾裡面，不然浏覽器無法讀取。同時，考慮到跨浏覽器的兼容性，我們不要給這個圖標添加任何鏈接。

　　更新favicon

　　由於某些原因浏覽器很喜歡保存網站圖標，這很糟糕，因為我們在開發的過程中需要更新圖標，每次我們放進一個新的圖標浏覽器卻不會自動把新的覆蓋舊的，看起來很不舒服。

　　此時，我們可以添加一個臨時的html指向favicon.ico的位置。此外,我們應該添加一個短而無意義的圖標URL查詢字符串,如下:

　　這將使浏覽器認為這是一個迫切需要完成的任務，我們的新圖標就這麼被更新了。切記更新完畢後記得立馬刪掉該語句。那麼如果我們需要額外再更新著這圖標呢?一樣的方法，增加v後面的數值就OK了。這樣子這個url永遠都是獨特有用的，但是要確保每次更新完都記得把這串語句刪掉。

　　制作花樣繁雜的網站圖標

　　本文只是粗略地介紹一個網站圖標制作並投入使用的流程，但實際設計中我們往往需要制作各式各樣的圖標。比如ioc觸屏圖標，windows的metro風格圖標，google TV圖標等等，所以牆裂建議你查看一下這份favicon審核列表。

　　(Favico.js允許我們創建動態圖標)

　　你可能需要創建很多可標記的動態圖標，標記是為了統計數量，所以很有必要去看這份文件。對了，這文件的跨浏覽器支持性不是很好，但是依然很好用。