在线亚洲男人的天堂a∨_中国毛片区免费区_伊人久久中文大香线蕉综合_久了精品国产99国产精

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

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

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

新手教程之如何設(shè)計Favicon站點圖標,PS教程,

新手教程之如何設(shè)計Favicon站點圖標,PS教程,

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

好文推薦：

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

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

設(shè)計一枚favicon

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

新手教程之如何設(shè)計Favicon站點圖標,PS教程,

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

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

新手教程之如何設(shè)計Favicon站點圖標,PS教程,

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

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

新手教程之如何設(shè)計Favicon站點圖標,PS教程,

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

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

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

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

24×24 –固定在IE9

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

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

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

保存favicon

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

新手教程之如何設(shè)計Favicon站點圖標,PS教程,

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

給網(wǎng)站添加favicon

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

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

更新favicon

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

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

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

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

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

新手教程之如何設(shè)計Favicon站點圖標,PS教程,

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

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