很多朋友建設(shè)網(wǎng)站后瀏覽別人的網(wǎng)站發(fā)現(xiàn)網(wǎng)站標(biāo)題欄會(huì)出現(xiàn)一個(gè)小圖標(biāo)(見(jiàn)下圖),瞬間感覺(jué)自己的網(wǎng)站并不完美。沒(méi)有關(guān)系,藝瓊網(wǎng)絡(luò)教你如何做這個(gè)小圖標(biāo)(favicon.ico)并讓它顯示在你的網(wǎng)站標(biāo)題欄里。
其實(shí),這個(gè)小圖標(biāo)是存放在你網(wǎng)站目錄里的一個(gè)后綴為ico的小圖標(biāo)文件。首先,咱們來(lái)看看如何做這個(gè)小圖標(biāo)。這里需要用到2個(gè)軟件:一個(gè)是Photoshop,什么版本都可以,筆者用的是Photoshop 7.0。另一個(gè)是Awicons,用V9.4.0吧。沒(méi)有安裝的去百度搜索一下就有下載。OK,準(zhǔn)備就緒。
第一步:
在Photoshop里新建一個(gè)寬高為16 X 16像素的PSD文件,然后將你的LOGO(建議為PNG透明背景圖片)拖放到這個(gè)文件里,按Ctrl + T修改圖標(biāo)的尺寸(修改尺寸時(shí)注意按住Shift鍵,進(jìn)行等比縮放),讓圖片正好全部顯示在這個(gè)16 X 16像素的框框里。然后把背景圖層隱藏掉,另存為PNG透明背景圖片。
第二步:
打開(kāi)Awicons軟件,新建一個(gè)文件,將像素同樣改成16 X 16像素。直接將上面做好的PNG小圖片拖到Awicons里,然后點(diǎn)保存按鈕,命名為favicon.ico。
經(jīng)過(guò)上面的操作,你已經(jīng)得到了一個(gè)可放置在網(wǎng)站標(biāo)題欄前的小圖標(biāo)。怎么放呢?有兩種方法可以實(shí)現(xiàn)這個(gè)功能。
第一種(強(qiáng)烈推薦,簡(jiǎn)單、好用):
將做好的ICO圖標(biāo)favicon.ico上傳到網(wǎng)站的根目錄即可,全站所有頁(yè)面都會(huì)讀到這個(gè)圖標(biāo)并顯示在網(wǎng)站的標(biāo)題欄里,注意,一定且必須是favicon.ico,不然瀏覽器無(wú)法讀取到的。
第二種:
在網(wǎng)頁(yè)代碼中的<head>和</head>之間添加下列代碼:
<link rel="icon" href="ico圖標(biāo)地址" type="image/x-icon">
這種方式允許ICO圖標(biāo)任意命名并放在網(wǎng)站的任意目錄里,修改上面代碼中的“ico圖標(biāo)地址”為你的圖標(biāo)真實(shí)地址即可。這種方式要麻煩許多,而且每個(gè)頁(yè)面都要加代碼,因此,不推薦。
整個(gè)過(guò)程很簡(jiǎn)單,藝瓊網(wǎng)絡(luò)經(jīng)常為客戶(hù)網(wǎng)站添加這種標(biāo)題欄小圖標(biāo),一般十分鐘內(nèi)就完成了。如果你不會(huì)處理,筆者可以幫你。