方正視覺(jué)經(jīng)常會(huì)碰到客戶(hù)要求在網(wǎng)頁(yè)標(biāo)簽欄處加一個(gè)小圖片，看起來(lái)酷酷的，這個(gè)的制作其實(shí)非常簡(jiǎn)單，它叫做favicon、 favicon.ico、favicon圖標(biāo)。favicon.ico會(huì)顯示在瀏覽器的地址欄，瀏覽器的標(biāo)簽頁(yè)上和你的收藏夾中，建立自己的網(wǎng)上品牌這樣的細(xì)節(jié)工作不可少。

　　這樣大家清楚了什么是favicon.ico?下面方正視覺(jué)說(shuō)一下favicon制作技巧,就是favicon圖標(biāo)的制作。

　　制作favicon圖標(biāo)只需要兩步：

　　一、做一個(gè)16*16像素的favicon.ico圖片，上傳到網(wǎng)站根目錄下。

　　二、把這段代碼放在網(wǎng)頁(yè)head區(qū)域里就行了。

　　對(duì)于專(zhuān)業(yè)人士看起來(lái)很簡(jiǎn)單，那沒(méi)有基礎(chǔ)的人呢，別急，下面方正視覺(jué)給大家擴(kuò)展一下，詳細(xì)說(shuō)明favicon.ico圖標(biāo)的制作過(guò)程。

　　第一步：favicon.ico圖片制作

　　我們需要用到在線制作工具，省時(shí)省力，http://www.favicon.cc/這是一個(gè)國(guó)外的在線制作工具，功能強(qiáng)大，界面親和。

　　現(xiàn)在網(wǎng)站建設(shè)的客戶(hù)基本都會(huì)有自己的logo，所以這里先講一下，直接上傳logo的方法：

　　點(diǎn)擊插入圖片

　　選擇文件，這里如果是ai格式的logo要另存一下，存成jpg格式，當(dāng)然還有其它的格式，圖片上面有寫(xiě)的很清楚。

　　然后點(diǎn)擊上傳，短暫的等待會(huì)出現(xiàn)下面的樣式，中間就是你的logo的像素化圖像。

　　下面還會(huì)很貼心的顯示出，實(shí)際的效果

　　點(diǎn)擊Download Favicon 會(huì)生成favicon.ico圖標(biāo)，下載到本機(jī)上就行了。這樣的你的企業(yè)的favicon.ico圖片就制作完成了。

　　可能有的企業(yè)暫時(shí)還沒(méi)有自己的logo，那么也不用擔(dān)心，我們可以自己制作一個(gè)簡(jiǎn)單的favicon.ico。

　　點(diǎn)擊左上角新建一個(gè)文件

　　下面的界面方正視覺(jué)來(lái)給大家翻譯一下，每個(gè)按鈕的用途：

　　先看右邊取色畫(huà)圖，大家都明白，就像window自帶的畫(huà)圖工具一樣，下面的三個(gè)小按鈕分別為"橡皮" "取色" "移動(dòng)"

　　橡皮：下面試著在中間的畫(huà)布上隨便圖一下，然后點(diǎn)擊橡皮工具，擦擦試試。

　　取色：有時(shí)看到的顏色很漂亮，但又找不到確切的位置，就用這個(gè)來(lái)取一下顏色。

　　移動(dòng)：畫(huà)歪了?不怕，點(diǎn)他，移動(dòng)到喜歡的位置就行了。

　　畫(huà)布下面的四個(gè)按鈕分別代表：清除場(chǎng)景、創(chuàng)建下一個(gè)場(chǎng)景、拷備前一個(gè)場(chǎng)景、刪除場(chǎng)景。

　　這幾個(gè)按鈕的用法就高級(jí)一些了，因?yàn)閒avicon.ico也可以做成gif動(dòng)畫(huà)的效果，是不是很酷，但每個(gè)動(dòng)作都要我們自己做出來(lái)，動(dòng)作是否連貫就要看你做的細(xì)不細(xì)了，這是個(gè)細(xì)心的活，方正視覺(jué)就不在這里多說(shuō)了。有興趣的朋友可以試試看。

　　第二步：把代碼放入網(wǎng)頁(yè)的頭部：

　　玩夠了，也做出個(gè)自己喜歡的favicon.ico圖標(biāo)，就要讓favicon.ico顯示出來(lái)了。

　　這里插入一個(gè)小常識(shí)，現(xiàn)在大多數(shù)網(wǎng)站程序是cms系統(tǒng)的，cms系統(tǒng)的頁(yè)面都是用模板形式生成，一般的模板文件也都放在網(wǎng)站根目錄的“templets”文件里

　　點(diǎn)開(kāi)以后一般都會(huì)有一個(gè)“header”開(kāi)關(guān)的文件，后綴名可能不一樣，找到這個(gè)文件，用Dreamweaver軟件打開(kāi)，顯示的內(nèi)容也會(huì)不一樣，但只要抓住重點(diǎn)就行了。

　　在以上加入代碼：就可以了，也不用管上面還有其它什么東西了。

　　到這里favicon.ico圖標(biāo)的制作就完成了，希望方正視覺(jué)的文章可以幫助到大家。

　　說(shuō)的比較多，但都是切身體會(huì)，親身實(shí)踐，相信會(huì)對(duì)朋友們有所幫助。方正視覺(jué) www.whjianzhan.com A5首發(fā)，大家轉(zhuǎn)載請(qǐng)注明出處，注明出處的財(cái)源滾滾，流量大增，謝謝!