您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

像素藝術(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部分。

幫助
1
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />

制作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。

為網(wǎng)站制作Favicon圖標(biāo)

使用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)畫。

為網(wǎng)站制作Favicon圖標(biāo)

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

為網(wǎng)站制作Favicon圖標(biāo)

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

http://www.ico.la

http://ico.55.la

http://www.bitbug.com

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1076.html
45個(gè)網(wǎng)頁(yè)設(shè)計(jì)中創(chuàng)意的大字體設(shè)計(jì)
淺談移動(dòng)互聯(lián)網(wǎng)廣告設(shè)計(jì)
圖趣網(wǎng)微信
建議反饋
×