新手教程之如何設(shè)計(jì)Favicon站點(diǎn)圖標(biāo)發(fā)布者：本站     時(shí)間：2021-12-23 10:12:00

現(xiàn)代網(wǎng)頁設(shè)計(jì)中最令人沮喪和感到混亂的莫過于網(wǎng)站圖標(biāo)了(favicon)，是“favorite icon”的簡稱。這枚小小的圖標(biāo)一般出現(xiàn)在瀏覽器的選項(xiàng)卡里、地址欄處，根據(jù)我們操作系統(tǒng)和瀏覽器的不同，還有可能出現(xiàn)在其他地方。

我先給大家科普下：favicon，即Favorites Icon的縮寫。favicon 就是出現(xiàn)在瀏覽器地址欄左側(cè)的那個(gè)小圖標(biāo)。favicon，中文名稱是網(wǎng)站頭像。當(dāng)然，這不僅僅是Favicon的全部，根據(jù)瀏覽器的不同，F(xiàn)avicon顯示也有所區(qū)別：在大多數(shù)主流瀏覽器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不僅在收藏夾中顯示，還會(huì)同時(shí)出現(xiàn)在地址欄上，這時(shí)用戶可以拖曳favicon到桌面以建立到網(wǎng)站的快捷方式;除此之外，標(biāo)簽式瀏覽器甚至還有不少擴(kuò)展的功能，如FireFox甚至支持動(dòng)畫格式的favicon等。

新手教程之如何設(shè)計(jì)Favicon站點(diǎn)圖標(biāo),PS教程,

新手教程之如何設(shè)計(jì)Favicon站點(diǎn)圖標(biāo),PS教程,

由于他們不同尋常的文件格式和超級小的圖像尺寸使得設(shè)計(jì)師們在設(shè)計(jì)這些圖標(biāo)時(shí)顯得很費(fèi)勁。更加見鬼的是，人們有時(shí)候甚至糾結(jié)于這單詞的發(fā)音(我曾聽人說“fah-vee-con”和“fave-eye-con”,盡管前者更常見)。啊，穿過一切沒用的元素，直擊主題吧!

好文推薦：

第二彈!那些你不知道的photoshop冷知識(shí)之乾坤大挪移

高手支招!怎樣分辨圖片是否被PS過

設(shè)計(jì)一枚favicon

創(chuàng)建標(biāo)識(shí)是設(shè)計(jì)的第一步。一個(gè)好的favicon應(yīng)該在本身小得如同表情的情況下捕獲網(wǎng)站的本質(zhì)，并且在非常緊湊的空間里傳達(dá)你的品牌。Favicon最常見的形式是該公司的商標(biāo)標(biāo)志(并非完整的標(biāo)志與文字合并成的商標(biāo))。

新手教程之如何設(shè)計(jì)Favicon站點(diǎn)圖標(biāo),PS教程,

(這些網(wǎng)站使用該品牌的標(biāo)志,或至少接近它)

排除任何文本是一個(gè)好主意，畢竟這圖標(biāo)是在太小了。不過也有例外，那就是標(biāo)志性的標(biāo)志標(biāo)記文本。例如,維基百科使用公認(rèn)的“W”而Facebook使用其眾所周知的「F」。

新手教程之如何設(shè)計(jì)Favicon站點(diǎn)圖標(biāo),PS教程,

(這些圖標(biāo)使用與該品牌密切關(guān)聯(lián)的一個(gè)字母。在這個(gè)例子中,你還會(huì)注意到,迪斯尼圖標(biāo)出現(xiàn)失常。這是因?yàn)檫@截圖拍攝于視網(wǎng)膜顯示屏,他們只使用一個(gè)16×16圖標(biāo)大小,而其他網(wǎng)站提供一個(gè)32×32大小和更多的細(xì)節(jié)。)

這些網(wǎng)站圖標(biāo)們實(shí)在是太小了導(dǎo)致了每個(gè)像素都被計(jì)算在內(nèi)。有時(shí)候直接把一個(gè)完整的logo縮小下來很容易造成圖標(biāo)變得很模糊。所以，制作這些網(wǎng)站圖標(biāo)時(shí)往往都是按照像素級別去設(shè)計(jì)。

新手教程之如何設(shè)計(jì)Favicon站點(diǎn)圖標(biāo),PS教程,

(這是Facebook的logo被整合為32*32像素時(shí)的一部分，邊緣混淆而模糊，再一次證明像素級別的設(shè)計(jì)是很有必要的。)

在編輯圖標(biāo)時(shí)，我喜歡用位圖軟件編輯。例如Photoshop或者Pixelmator就可以做出很棒的效果。我通常先調(diào)整我的大標(biāo)志到64×64px,因?yàn)檫@是我需要的最大的圖標(biāo)大小。接著我使用鉛筆工具編輯一次，知道像素圖標(biāo)看起來很脆。這是一個(gè)非常繁瑣的過程,可能需要一兩個(gè)小時(shí),但它會(huì)產(chǎn)生最好的結(jié)果。

一旦我把滿意的64×64px圖標(biāo)做出來，我會(huì)按照原來的方法繼續(xù)做出32×32, 24×24和 16×16的圖標(biāo)。下面是各尺寸對應(yīng)的用途：

64×64 –Safari閱讀列表和Windows網(wǎng)站圖標(biāo)

24×24 –固定在IE9

32×32 –高DPI或視網(wǎng)膜顯示屏往往會(huì)用到這個(gè)尺寸的圖標(biāo)

16×16 – 在各種瀏覽器中最常用的尺寸大小

你可能會(huì)發(fā)現(xiàn)要得到這些小圖標(biāo)，通常通過調(diào)整64×64的就可以了，但往往會(huì)有更多的地方需要用到像素級別的編輯。記住如果你想調(diào)整這些小圖標(biāo)的alpha值也是可以的。幾乎所有當(dāng)下使用的瀏覽器都支持透明小圖標(biāo)。

保存favicon

我們做完所有尺寸的圖標(biāo)后就可以保存了!在ps中使用“存儲(chǔ)為web所用格式”然后選擇png格式。接下來需要轉(zhuǎn)換png為ICO文件。我們把這些圖標(biāo)再次統(tǒng)一放進(jìn)一張大的png圖片里。ICO并不是一個(gè)常用的格式，但是我們依然需要它。使用X-Icon編輯器可以很好地轉(zhuǎn)換之。這是一個(gè)免費(fèi)的web在線工具，我們上傳自己的圖像然后導(dǎo)出合適大小的圖標(biāo)。步驟非常簡單，跟著該網(wǎng)上的步驟指示就OK了。

新手教程之如何設(shè)計(jì)Favicon站點(diǎn)圖標(biāo),PS教程,

(X-Icon可以讓我們很方便地根據(jù)網(wǎng)站指示上傳png格式的圖片然后導(dǎo)出ico格式的圖標(biāo)，尺寸很豐富~)

給網(wǎng)站添加favicon

完成以上步驟后我們就可以把ico文件存到網(wǎng)站根目錄下了?，F(xiàn)在我們在網(wǎng)站的頂級域名外加上“/favicon.ico”即可看到該圖標(biāo)。比如http://example.com/favicon.ico。

幾乎每一個(gè)瀏覽器都會(huì)自動(dòng)查找網(wǎng)站根目錄下的favicon.ico文件然后顯示出來，所以不要將它藏在文件夾里面，不然瀏覽器無法讀取。同時(shí)，考慮到跨瀏覽器的兼容性，我們不要給這個(gè)圖標(biāo)添加任何鏈接。

更新favicon

由于某些原因?yàn)g覽器很喜歡保存網(wǎng)站圖標(biāo)，這很糟糕，因?yàn)槲覀冊陂_發(fā)的過程中需要更新圖標(biāo)，每次我們放進(jìn)一個(gè)新的圖標(biāo)瀏覽器卻不會(huì)自動(dòng)把新的覆蓋舊的，看起來很不舒服。

此時(shí)，我們可以添加一個(gè)臨時(shí)的html指向favicon.ico的位置。此外,我們應(yīng)該添加一個(gè)短而無意義的圖標(biāo)URL查詢字符串,如下:

這將使瀏覽器認(rèn)為這是一個(gè)迫切需要完成的任務(wù)，我們的新圖標(biāo)就這么被更新了。切記更新完畢后記得立馬刪掉該語句。那么如果我們需要額外再更新著這圖標(biāo)呢?一樣的方法，增加v后面的數(shù)值就OK了。這樣子這個(gè)url永遠(yuǎn)都是獨(dú)特有用的，但是要確保每次更新完都記得把這串語句刪掉。

制作花樣繁雜的網(wǎng)站圖標(biāo)

本文只是粗略地介紹一個(gè)網(wǎng)站圖標(biāo)制作并投入使用的流程，但實(shí)際設(shè)計(jì)中我們往往需要制作各式各樣的圖標(biāo)。比如ioc觸屏圖標(biāo)，windows的metro風(fēng)格圖標(biāo)，google TV圖標(biāo)等等，所以墻裂建議你查看一下這份favicon審核列表。

新手教程之如何設(shè)計(jì)Favicon站點(diǎn)圖標(biāo),PS教程,

(Favico.js允許我們創(chuàng)建動(dòng)態(tài)圖標(biāo))

你可能需要?jiǎng)?chuàng)建很多可標(biāo)記的動(dòng)態(tài)圖標(biāo)，標(biāo)記是為了統(tǒng)計(jì)數(shù)量，所以很有必要去看這份文件。對了，這文件的跨瀏覽器支持性不是很好，但是依然很好用。