什么是favicon.ico？favicon圖標(biāo)制作和制作技巧

時間：2022-08-10 18:12:02 | 來源：建站知識

時間：2022-08-10 18:12:02 來源：建站知識

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

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

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

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

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

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

第一步：favicon.ico圖片制作

我們需要用到在線制作工具，省時省力，這是一個國外的在線制作工具，功能強(qiáng)大，界面親和。

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

點(diǎn)擊插入圖片

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

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

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

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

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

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

下面的界面方正視覺來給大家翻譯一下，每個按鈕的用途：

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

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

取色：有時看到的顏色很漂亮，但又找不到確切的位置，就用這個來取一下顏色。

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

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

這幾個按鈕的用法就高級一些了，因為favicon.ico也可以做成gif動畫的效果，是不是很酷，但每個動作都要我們自己做出來，動作是否連貫就要看你做的細(xì)不細(xì)了，這是個細(xì)心的活，方正視覺就不在這里多說了。有興趣的朋友可以試試看。

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

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

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

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

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

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

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