Favicon，常被稱為網(wǎng)頁(yè)小圖標(biāo)、網(wǎng)站縮略圖標(biāo)或者收藏夾圖標(biāo)，是網(wǎng)站在瀏覽器和收藏夾中除標(biāo)題外的重要識(shí)別方式。今天的這篇文章來(lái)自設(shè)計(jì)師Philippe Bernard，他以小測(cè)試的形式為我們?cè)敿?xì)介紹了Favicon的相關(guān)知識(shí)。在文末，Philippe 還為我們介紹了他設(shè)計(jì)的在線Favicon制作工具RealFaviconGenerator(自備梯子)。

Favicon最早于1999年出現(xiàn)在IE5上，并且在幾個(gè)月之后由W3C納入標(biāo)準(zhǔn)，作為代表網(wǎng)站的小圖標(biāo)。

隨后，絕大多數(shù)的桌面端瀏覽器跟隨這一趨勢(shì)，開(kāi)始以各自的方式使用Favicon。為網(wǎng)站隨便做個(gè)小圖標(biāo)嘛，一點(diǎn)都不炫酷，能有多復(fù)雜？事實(shí)真的如此嘛？

讓我們通過(guò)一個(gè)小測(cè)試來(lái)了解一下Favicon。

問(wèn)：Favicon的圖標(biāo)文件長(zhǎng)啥樣？

答：這上一個(gè)favicon.ico 文件，通常它并不是一個(gè)改名之后的PNG圖片，雖然有的瀏覽器可以識(shí)別PNG改ICO的Favicon文件。ICO實(shí)際上是一個(gè)完全不同的格式，它支持使用一張圖片包含多個(gè)版本和格式。

問(wèn)：Favicon.ico應(yīng)該是什么尺寸？

A：標(biāo)準(zhǔn)尺寸應(yīng)該是16x16吧。
B：好象什么時(shí)候標(biāo)準(zhǔn)更新為32x32~
C：視網(wǎng)膜屏幕開(kāi)始流行了！現(xiàn)在應(yīng)該用64x64！
D：以上答案都是扯淡。

答：D。Favicon.ico的格式最初是由微軟和其他一系列廠商共同制定標(biāo)準(zhǔn)。微軟建議使用16x16、32x32 和 48x48。是的，沒(méi)錯(cuò)，一個(gè)ICO格式文件可以包含多個(gè)圖片喲~

桌面瀏覽器中經(jīng)常在選項(xiàng)卡中使用Favicon，在標(biāo)準(zhǔn)的顯示器上，16x16的分辨率就夠看了：

截至目前，16x16 的Favicon.ico 在谷歌瀏覽器的標(biāo)簽中，看起來(lái)還很不錯(cuò)。

可是，16x16 的Favicon.ico添加到桌面上就不好看了。

將16x16 的Favicon.ico添加到任務(wù)欄的效果。

16x16 的Favicon.ico 添加到桌面的效果，并不理想。

所以，當(dāng)Favicon包含多個(gè)圖片之后，展示效果會(huì)好很多。

當(dāng)使用包含16x16，32x32以及48x48 多尺寸圖片的Favicon之后，任務(wù)欄的顯示效果就好多了，看起來(lái)更像是本地應(yīng)用了。

包含16x16，32x32以及48x48 多尺寸圖片的Favicon 應(yīng)用到桌面上，效果完美。

問(wèn)：那么Favicon.png的意義何在？

當(dāng)我們深入探討Favicon的時(shí)候，始終繞不過(guò)Favicon.png這個(gè)文件，人們一直對(duì)它心存疑慮。它究竟是什么？

A：它是為那些不支持Favicon.ico這種文件而生的圖標(biāo)，比如Firefox？
B：一個(gè)高分辨率的圖標(biāo)。要知道，高分辨率的屏幕越來(lái)越多了。
C：這上一個(gè)歷史遺留的產(chǎn)物?，F(xiàn)在有更加現(xiàn)代的圖標(biāo)替代它。
D：well，這是一個(gè)非常復(fù)雜的事兒。

答：D。隨著HTML5的推行，F(xiàn)avicon.ico 逐漸顯得不那么有用了。不同大小屬性的圖片可以被同一個(gè)圖片的不同版本所替代，而PNG格式圖片正好可以勝任。

<link rel="icon" type="image/png" target="_blank"  sizes="16x16">
<link rel="icon" type="image/png" target="_blank"  sizes="32x32">
<link rel="icon" type="image/png" target="_blank"  sizes="96x96">

那么，我們應(yīng)該怎樣聲明呢？

接下來(lái)，我們要面對(duì)的真相可能并不那么令人滿意。盡管所有的桌面瀏覽器都在支持Favicon.ico文件，但是這個(gè)文件終究是過(guò)時(shí)的。你依然可以繼續(xù)使用Favicon.ico，它也仍然會(huì)繼續(xù)正常工作，但坦率地講，它的局限性越來(lái)越明顯，相反，PNG更加一致，應(yīng)用范圍更廣。

Favicon.ico 是為舊版的IE而生，對(duì)于其他瀏覽器和新版的IE，我們傾向于使用PNG圖標(biāo)，那么我們應(yīng)該怎樣設(shè)置它的尺寸呢？接下來(lái)，我們探討一下這個(gè)問(wèn)題。

問(wèn)：在移動(dòng)平臺(tái)上我們需要什么樣的格式？

根據(jù)AmartInsights的數(shù)據(jù)顯示，超過(guò)26%的網(wǎng)站流量是來(lái)自智能手機(jī)和平板，那么在未來(lái)，我們需要使用什么樣的格式呢？

A：當(dāng)然是Favicon.ico，截至目前它已經(jīng)存在15年了。
B：PNG格式圖標(biāo)。你都說(shuō)了要繼續(xù)探討這個(gè)了~
C：Apple Touch Icon
D：反正無(wú)論如何都不會(huì)在ABC中列出正確答案……

備注：在iPhone,iPad,iTouch的safari上可以使用添加到主屏按鈕將網(wǎng)站添加到主屏幕上。apple-touch-icon是IOS設(shè)備的私有標(biāo)簽，如果設(shè)置了相應(yīng)apple-touch-icon標(biāo)簽，則添加到主屏上的圖標(biāo)會(huì)使用指定的圖片。Apple-touch-icon?標(biāo)簽支持sizes屬性，可以用來(lái)放置對(duì)應(yīng)不同的設(shè)備。

答：D。你需要PNG 圖標(biāo)，也需要Apple Touch Icon，還需要Windows 8 磁貼，最重要的，你需要一個(gè)名為 browserconfig.xml 的文件。

比起傳統(tǒng)的桌面端瀏覽器，移動(dòng)端平臺(tái)更加龐雜，屏幕尺寸和分辨率也差異巨大，iOS和Android兩家割據(jù)，并不是像互聯(lián)網(wǎng)剛剛興起的時(shí)候WIndows一家獨(dú)大之時(shí)那么容易推廣標(biāo)準(zhǔn)。所以，你不用期待一個(gè)移動(dòng)端Favicon 應(yīng)付所有需求。

問(wèn)：那么PNG格式應(yīng)該使用哪些尺寸呢？

A：96x96，Google TV
B：196x196，Android和Chrome
C：228x228，Coast，Opera
D：以上全部

答：D。當(dāng)然，這還不是全部。你還需要為老版的Opera的快速撥號(hào)界面準(zhǔn)備 160x160 尺寸的圖標(biāo)，而Chrome 網(wǎng)上商店的圖標(biāo)還需要128x128 尺寸的圖標(biāo)。所以，在選取尺寸的時(shí)候需要考慮它到底要支持哪些平臺(tái)。

問(wèn)：Apple Touch Icon 的尺寸應(yīng)設(shè)定為多少？

答：早期的時(shí)候，你只需要準(zhǔn)備57x57的圖標(biāo)就行，但是現(xiàn)在，你需要制作高達(dá)152x152 的圖標(biāo)。

在iPhone發(fā)布之后，Apple Touch icon的尺寸發(fā)生過(guò)3次變化。

首先是iPad的發(fā)布。它的屏幕尺寸比iPhone大，圖標(biāo)尺寸也稍有差別。
然后是Retina屏幕。這時(shí)候屏幕的像素密度是之前的2倍。
再就是iOS7的發(fā)布。扁平化之后，圖標(biāo)在iPhone和iPad上略有不同。

這樣一來(lái)，iOS上圖標(biāo)尺寸就有了2x2x2=8種規(guī)格：

老版的57x57的Apple Touch icon 在視網(wǎng)膜屏幕上的效果很模糊。

152x152 的Apple Touch icon 在視網(wǎng)膜上效果很清晰。

如果你沒(méi)有猜對(duì)Apple Touch icon的正確尺寸，不要自責(zé)。在全球最靠前的5000個(gè)網(wǎng)站中，能用對(duì)Apple Touch icon的不到4%。

有人可能會(huì)說(shuō)，制作8個(gè)版本的Apple Touch icon沒(méi)有必要，但是你至少需要備好一個(gè)152x152的圖標(biāo)。這能確保運(yùn)行iOS7的視網(wǎng)膜屏幕iPad能夠正常顯示圖標(biāo)，而分辨率較低的iOS設(shè)備也能按比例縮小，顯示效果也不會(huì)差。

問(wèn)：有必要在HTML中聲明Apple Touch icon么？

A：不知道。
B：有必要。否則iOS怎么能識(shí)別它們？
C：沒(méi)必要。按照Apple的習(xí)慣來(lái)放置圖標(biāo)就夠了，iOS設(shè)備無(wú)論如何都會(huì)找到它們的。
D：沒(méi)有必要，但是……

答：好吧，答案還是D。考慮到還有其他平臺(tái)（Andorid，WP等）也會(huì)用Apple Touch icon，所以最好還是為之作出聲明。

<link rel="apple-touch-icon" sizes="57x57" target="_blank" > 
<link rel="apple-touch-icon" sizes="114x114" target="_blank" > 
<link rel="apple-touch-icon" sizes="72x72" target="_blank" > 
<link rel="apple-touch-icon" sizes="144x144" target="_blank" > 
<link rel="apple-touch-icon" sizes="60x60" target="_blank" > 
<link rel="apple-touch-icon" sizes="120x120" target="_blank" > 
<link rel="apple-touch-icon" sizes="76x76" target="_blank" > 
<link rel="apple-touch-icon" sizes="152x152" target="_blank" >

比起高分辨率的PNG圖片，Apple Touch icon更流行也更加常見(jiàn)，諸如Android Chrome這樣的移動(dòng)端瀏覽器也傾向于使用它們。因此，聲明它們會(huì)相對(duì)更安全，以備其他兼容的設(shè)備和瀏覽器隨時(shí)能夠訪問(wèn)它們。

問(wèn)：怎樣才能為 WIndows 8 平板設(shè)計(jì)一個(gè)磁貼？

A：windows 8 平板是個(gè)啥？
B：Favicon.ico，這是鮑爾默（微軟前CEO）的遺產(chǎn)。
C：使用Two msapplication-TileColor 和 msapplication-TileImage meta 標(biāo)簽.
D：browserconfig.xml

答：對(duì)于Windows 8.0 和IE 10，答案是C；對(duì)于WIndows 8.1和IE 11，答案是D；當(dāng)然，A差不多也可以說(shuō)是對(duì)的，哈哈~
Windows 8.0 中通常是這樣聲明的：

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

在Windows 8.1 和 IE 11 中的磁貼則通常是這樣聲明的：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig> 
    <msapplication> 
        <tile> 
            <square70x70logo src="/mstile-70x70.png"/> 
            <square150x150logo src="/mstile-150x150.png"/> 
            <square310x310logo src="/mstile-310x310.png"/> 
            <wide310x150logo src="/mstile-310x150.png"/> 
            <TileColor>#2b5797</TileColor> 
        </tile> 
    </msapplication> 
</browserconfig>

新的Metro Ui擁有一系列全新的設(shè)計(jì)規(guī)范，比如內(nèi)置的APP都使用了“white silhouettes”。

Windows 8 桌面的網(wǎng)站磁貼。

問(wèn)：150x150 尺寸的Logo 磁貼到底要用多大尺寸的？

A：都說(shuō)了是150x150的，還會(huì)有什么其他的尺寸？
B：怎么不能是其他尺寸的？

答：B，270x270。微軟推薦使用更大的尺寸，以兼容更高分辨率的屏幕……

恭喜你！整個(gè)測(cè)試到此結(jié)束，你都答對(duì)了么？

這些問(wèn)題看起來(lái)很簡(jiǎn)單，但是實(shí)際上真正深究的話，還是非常刁鉆的。單純使用Favicon.ico的時(shí)代已經(jīng)過(guò)去了，雖然還有網(wǎng)站沿襲舊有的習(xí)慣，但是常常會(huì)導(dǎo)致荒謬的結(jié)果。我們可以耗費(fèi)很長(zhǎng)時(shí)間來(lái)精心雕琢響應(yīng)式網(wǎng)站，但是如何只是內(nèi)置一個(gè)57x57的 Apple Touch icon，那么網(wǎng)站也只能是在老舊的設(shè)備上正常顯示。

為移動(dòng)時(shí)代而生的Favicon生成器

在今天，制作一個(gè)符合多平臺(tái)需求的Favicon是復(fù)雜而艱難的。你當(dāng)然可以在網(wǎng)站根目錄中內(nèi)置一個(gè)老派的Favicon.ico，一個(gè)32x32的PNG圖標(biāo)和一個(gè)152x152的Apple Touch icon。但是，你也可以內(nèi)置足以應(yīng)付任何分辨率屏幕的一組圖標(biāo)，只是這樣一來(lái)，工作量就非常恐怖了。

這個(gè)時(shí)候，你需要RealFaviconGenerator。和傳統(tǒng)的Favicon生成器不一樣，RealFaviconGenerator主要滿足2大需求：編輯圖標(biāo)，和生成代碼。

不同的平臺(tái)使用截然不同的界面，所以需要為不同的平臺(tái)生成不同的圖標(biāo)。RealFaviconGenerator自然不是在線的PS，但是RealFaviconGenerator通過(guò)設(shè)置可以幫你設(shè)計(jì)出符合不同平臺(tái)需求的圖標(biāo)。比如，你可以為iOS設(shè)備生成帶不透明背景的圖標(biāo)，以及符合Windows 8的白色圖標(biāo)。

RealFaviconGenerator 編輯器

主要生成圖片和相應(yīng)的HTML代碼，其中主要覆蓋以下平臺(tái)：PC/Mac，iOS，Android，Windows 8 等。

可用的圖片和HTML代碼

比如，當(dāng)你提供一個(gè)高分辨率的圖標(biāo)，簡(jiǎn)單幾個(gè)點(diǎn)擊就可以生成如下圖標(biāo)：

總而言之，在RealFaviconGenerator的幫助之下制作Favicon和10年前一樣方便快捷。

【圖標(biāo)設(shè)計(jì)學(xué)習(xí)三部曲】

Step 1：騰訊設(shè)計(jì)師的新人培訓(xùn)教程！初學(xué)者必備！
《傳承設(shè)計(jì)經(jīng)驗(yàn)！圖標(biāo)設(shè)計(jì)初階的3大關(guān)鍵入門知識(shí)點(diǎn)！》

Step 2：到頂尖UI設(shè)計(jì)師集聚地吸收經(jīng)驗(yàn)與靈感！
《設(shè)計(jì)師必讀！玩轉(zhuǎn)Dribbble終極指南》

Step 3：每天一練！技巧都學(xué)全！
《PS+AI制作精致可愛(ài)的毛線風(fēng)格圖標(biāo)》

原文地址：css-tricks
優(yōu)設(shè)網(wǎng)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量86萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：