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

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

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

新手教程之如何設計Favicon站點(diǎn)圖標,PS教程,

新手教程之如何設計Favicon站點(diǎn)圖標,PS教程,

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

好文推薦：

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

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

設計一枚favicon

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

新手教程之如何設計Favicon站點(diǎn)圖標,PS教程,

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

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

新手教程之如何設計Favicon站點(diǎn)圖標,PS教程,

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

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

新手教程之如何設計Favicon站點(diǎn)圖標,PS教程,

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

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

一旦我把滿(mǎn)意的64×64px圖標做出來(lái)，我會(huì )按照原來(lái)的方法繼續做出32×32, 24×24和 16×16的圖標。下面是各尺寸對應的用途：

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

24×24 –固定在IE9

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

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

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

保存favicon

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

新手教程之如何設計Favicon站點(diǎn)圖標,PS教程,

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

給網(wǎng)站添加favicon

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

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

更新favicon

由于某些原因瀏覽器很喜歡保存網(wǎng)站圖標，這很糟糕，因為我們在開(kāi)發(fā)的過(guò)程中需要更新圖標，每次我們放進(jìn)一個(gè)新的圖標瀏覽器卻不會(huì )自動(dòng)把新的覆蓋舊的，看起來(lái)很不舒服。

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

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

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

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

新手教程之如何設計Favicon站點(diǎn)圖標,PS教程,

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

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