像素藝術(shù)：為網(wǎng)站創(chuàng)建Favicon圖標(biāo)

Favicon是網(wǎng)站的縮略圖標(biāo)，是英文單詞Favorite Icons的縮寫，顧名思義，觀察你的收藏夾可以發(fā)現(xiàn)收藏夾里的網(wǎng)站旁邊都有一個(gè)小圖標(biāo)，這些小圖標(biāo)就是Favicon。在一些瀏覽器里，這些圖標(biāo)還有可能會(huì)顯示在地址欄里。一個(gè)好的網(wǎng)站設(shè)計(jì)，favicon也是不可獲取的一部分。

Favicon不僅有視覺增強(qiáng)的作用，而且還可以增強(qiáng)網(wǎng)站品牌，就像logo、網(wǎng)站整體色調(diào)、主題一樣。一個(gè)精美的Favicon可以幫助用戶在收藏夾、歷史記錄、書簽里迅速找到你的網(wǎng)站，讓網(wǎng)站更加引人注目。本教程教大家如何為網(wǎng)站做一個(gè)Favicon，并講解一些注意事項(xiàng)。

如何制作Favicon

制作Favicon是相對(duì)簡(jiǎn)單的，一般的瀏覽器支持的Favicon分辨率為16×16，但是有一些瀏覽器可能會(huì)支持32×32，下面一步步講解如何制作Favicon。

1.可以用windows自帶的畫圖工具或者專業(yè)的圖形制作軟件（如Photoshop），如果是簡(jiǎn)單的像素畫，畫圖工具就足夠了，同時(shí)畫圖工具也可以將文件保存成.ico的格式，當(dāng)然也可以將制作好其他格式的Favicon轉(zhuǎn)化為.ico格式。

2.在繪圖軟件里，新建一個(gè)16×16像素的文檔。如果之前沒有接觸過像素畫的人，在狹小的空間里繪制很多細(xì)節(jié)可能是一件困難的事情，這取決于你的練習(xí)。32×32像素可以提供更好的細(xì)節(jié)，但是16×16像素就已經(jīng)足夠適用于大多數(shù)的瀏覽器。

3.繪制好圖形后，將文件保存成.ico?？梢杂脀indows自帶的畫圖工具或者下面將會(huì)提到的一些在線工具，如果是Photoshop可能需要借助插件的幫助。也可以將文件保存成jpg、gif、png等網(wǎng)頁(yè)常用的格式，然后直接將擴(kuò)展名改為ico，不過有一些瀏覽器可能不支持這個(gè)方法。

4.將Favicon文件放置在網(wǎng)站的根目錄或者images文件夾。

5.在網(wǎng)站中導(dǎo)入Favicon，將下面代碼粘貼到head部分。

制作Favicon的注意事項(xiàng)

制作favicon似乎是很簡(jiǎn)單的事情，只要是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師都可以迅速上手，不過上面只是一個(gè)快速的提示，在制作Favicon時(shí)仍然有許多需要注意的地方，下面將會(huì)列出一些需要注意的地方。

為什么要將Favicon命名為favicon.ico

很多網(wǎng)站都會(huì)把Favicon文件命名為favicon.ico，這么做大多出于瀏覽器兼容的原因。

在一些現(xiàn)代的瀏覽器里，可以使用除了ico之外的網(wǎng)頁(yè)圖像格式，但是IE6只支持?jǐn)U展名為ico的Favicon，因此為了通用，所以將文件保存為ico，而且在IE5，只有把名字命名為“favicon”才可以被支持。

另外一個(gè)原因是，命名為favicon.ico是為了統(tǒng)一，既然大家都這么叫，那就讓它成為一個(gè)“標(biāo)準(zhǔn)”吧。

將Favicon放在根目錄

雖然我們?cè)谏衔闹袑avicon文件放在了image文件夾里，雖然可以將這個(gè)文件放在任何地方（代碼要正確地指向），不過一般來(lái)說(shuō)，許多開發(fā)者都傾向于將這個(gè)文件放在網(wǎng)站的根目錄，這似乎也成為了一種“標(biāo)準(zhǔn)”。

為Favicon圖標(biāo)創(chuàng)建多種分辨率

許多網(wǎng)站都將Favicon圖標(biāo)創(chuàng)建為16×16，這樣確實(shí)是足夠使用了，但是有時(shí)候我們會(huì)將這個(gè)圖標(biāo)用作其他用途，如桌面應(yīng)用程序的圖標(biāo)，因此制作出多種分辨率的Favicon也是有些必要的。

這里有一篇詳細(xì)的關(guān)于制作多種分辨率的Favicon圖標(biāo)的教程：用GIMP創(chuàng)建包含透明的多分辨率的Favicon，雖然這是一篇GIMP的教程，但是里面提到的方法適也用于其他的圖形軟件，如Photoshop。

使用256色板

256色板是windows的默認(rèn)色板，幾乎所有的瀏覽器都支持這256種顏色，同時(shí)簡(jiǎn)單的顏色也方便在狹小的空間里使用。

保持Favicon圖標(biāo)的簡(jiǎn)約以及和品牌統(tǒng)一

要記住使用Favicon的主要目的是用來(lái)增強(qiáng)品牌，所以很多favicon都和網(wǎng)站logo相關(guān)，或者做相應(yīng)的簡(jiǎn)化。不要隨意使用不相關(guān)的圖片做Favicon。同時(shí)要保持favicon的簡(jiǎn)約，16×16像素的大小不適合做一些復(fù)雜的效果。

制作Favicon的相關(guān)工具

Favicon CC是一個(gè)強(qiáng)大的在線制作Favicon的工具，這個(gè)工具除了制作靜態(tài)圖片之外，還能制作動(dòng)畫。

Favicon Generator可以方便地將其他格式的圖像轉(zhuǎn)換成Favicon可用的格式，同時(shí)他也支持一些附加的有用的選項(xiàng)。

同時(shí)一些在線制作ico圖標(biāo)的網(wǎng)站也是不錯(cuò)的選擇：

http://www.ico.la

http://ico.55.la

http://www.bitbug.com