favicon即是指favorites icon。在打開網(wǎng)頁時,瀏覽器標(biāo)簽頁面標(biāo)題左方的小圖示,將該網(wǎng)頁加入書簽時,書簽列的標(biāo)題也會帶有這樣的圖標(biāo),加上favicon圖標(biāo)的網(wǎng)頁不但容易和其它網(wǎng)頁區(qū)別,也能凸顯網(wǎng)頁的主題。
網(wǎng)頁設(shè)計經(jīng)常會碰到許多形形色色的LOGO商標(biāo),各有不同的形狀風(fēng)格,在一般網(wǎng)頁上,我們通??梢苑奖愕闹苯訉⒃镜腖OGO應(yīng)用在首頁上,無須擔(dān)心空間大小的問題,但是當(dāng)設(shè)計favicon時就出現(xiàn)限制了。
因為favicon的位置只能顯示16px * 16px大小的圖示,若LOGO圖示是正方型、圓型的型狀,在轉(zhuǎn)換格式制作favicon圖標(biāo)時通常不會有問題,但若是LOGO組成元素太復(fù)雜,或是LOGO是長型的,要將這些全部塞在一個16px * 16px的方塊中還能清晰顯示是有困難的,往往輸出的結(jié)果是一團模糊無法辨識。
有鑒于此,合肥網(wǎng)絡(luò)公司小編搜集了一些企業(yè)的favicon,我們就來觀察一下其它企業(yè)網(wǎng)站如何展現(xiàn)他們的favicon,說不定能為上面的問題找到解答。
【Favicon觀察報告】
如果有是可能,大部分的企業(yè)都會將完整的LOGO直接縮小制作,因favicon的尺寸限制,最適合制作的LOGO形狀為長寬相同的圓型或正方型,且沒有太多文字及線條,以簡單色塊呈現(xiàn)的LOGO。
方形及圓形的LOGO
見下圖范例如:LOGO為正方形的Adobe、Pepsi的色塊圓型長寬相近,元素簡單,非常適合做為favicon,文字相對多的Burger King雖然是圓型,但縮小后,中央的文字幾乎無法閱讀,但仍能看出是Burger King的LOGO。
方形及圓形的LOGO
長方形的LOGO
接下來我們看到長型的LOGO,為了要維持它的比例,LOGO被縮得幾乎看不見。
長方形的LOGO
不規(guī)則型LOGO
大部分不規(guī)則型LOGO是以正方形或圓形為基礎(chǔ)發(fā)展,或是增加一些變型,但長寬相差不會太大,縮小時仍可順利維持辨識度,搭配透明背景更能展現(xiàn)LOGO的特色。
不規(guī)則型LOGO
長型LOGO簡化縮短
因為長型LOGO縮小往往難以辨識,因此在設(shè)計favicon時,取LOGO第一個字母作為代表,其余部分省略,此類型代表如google、facebook等。
長型LOGO
改變原有形狀
原本的LOGO形狀復(fù)雜,簡化為更簡單無裝飾的文字(如:奇異);以原有LOGO的色塊作為簡化的LOGO(如:usbank)或是取LOGO色重新設(shè)計(如:ebay)。
改變LOGO原有形狀
上面介紹了簡化LOGO的方式,現(xiàn)在讓我們挑出幾個幾個令人印象的LOGO,從中分析他們的特別之處。
amazon
amazon原本的LOGO是amazon文字加上下方的黃色圓弧箭頭所組成,在變成favicon時,巧妙的使用黃色圓弧箭頭搭配第一個英文字母,使簡化的LOGO依然保有amazon的特色,又達成了縮短LOGO的目的,極具巧思。
Yahoo
Yahoo的LOGO使用具有特色的yahoo字型加上驚嘆號,在轉(zhuǎn)換成favicon時,保留最具代表性的驚嘆號與第一個英文字母搭配,成功保留LOGO的原汁原味。
usbank
usbank的LOGO由造型色塊以及穩(wěn)重的粗體文字組成,顯示在favicon時,僅使用最具代表性的色塊,而省略其它文字,給人一種簡潔利落的印象,與其它的企業(yè)簡化方式相比,頗為特別。
因應(yīng)不同的LOGO形式,設(shè)計favicon的方法也有許多不同,這次借由參考各大品牌的網(wǎng)站,對于favicon的設(shè)計,又有一番不同的認識 :D。