教你制作完美的Favicon圖標

 Favicon，常被稱為網頁小圖標、網站縮略圖標或者收藏夾圖標，是網站在浏覽器和收藏夾中除標題外的重要識別方式。今天的這篇文章來自設計師Philippe Bernard，他以小測試的形式為我們詳細介紹了Favicon的相關知識。在文末，Philippe 還為我們介紹了他設計的在線Favicon制作工具RealFaviconGenerator(自備梯子)。

Favicon最早於1999年出現在IE5上，並且在幾個月之後由W3C納入標准，作為代表網站的小圖標。

隨後，絕大多數的桌面端浏覽器跟隨這一趨勢，開始以各自的方式使用Favicon。為網站隨便做個小圖標嘛，一點都不炫酷，能有多復雜？事實真的如此嘛？

讓我們通過一個小測試來了解一下Favicon。

問：Favicon的圖標文件長啥樣？

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

問：Favicon.ico應該是什麼尺寸？

A：標准尺寸應該是16×16吧。
B：好象什麼時候標准更新為32×32~
C：視網膜屏幕開始流行了！現在應該用64×64！
D：以上答案都是扯淡。

答：D。Favicon.ico的格式最初是由微軟和其他一系列廠商共同制定標准。微軟建議使用16×16、32×32 和 48×48。是的，沒錯，一個ICO格式文件可以包含多個圖片喲~

桌面浏覽器中經常在選項卡中使用Favicon，在標准的顯示器上，16×16的分辨率就夠看了：

截至目前，16×16 的Favicon.ico 在谷歌浏覽器的標簽中，看起來還很不錯。

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

將16×16 的Favicon.ico添加到任務欄的效果。

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

所以，當Favicon包含多個圖片之後，展示效果會好很多。

當使用包含16×16，32×32以及48×48 多尺寸圖片的Favicon之後，任務欄的顯示效果就好多了，看起來更像是本地應用了。

包含16×16，32×32以及48×48 多尺寸圖片的Favicon 應用到桌面上，效果完美。

問：那麼Favicon.png的意義何在？

當我們深入探討Favicon的時候，始終繞不過Favicon.png這個文件，人們一直對它心存疑慮。它究竟是什麼？

A：它是為那些不支持Favicon.ico這種文件而生的圖標，比如Firefox？
B：一個高分辨率的圖標。要知道，高分辨率的屏幕越來越多了。
C：這上一個歷史遺留的產物。現在有更加現代的圖標替代它。
D：well，這是一個非常復雜的事兒。

答：D。隨著HTML5的推行，Favicon.ico 逐漸顯得不那麼有用了。不同大小屬性的圖片可以被同一個圖片的不同版本所替代，而PNG格式圖片正好可以勝任。

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

那麼，我們應該怎樣聲明呢？

接下來，我們要面對的真相可能並不那麼令人滿意。盡管所有的桌面浏覽器都在支持Favicon.ico文件，但是這個文件終究是過時的。你依然可以繼續使用Favicon.ico，它也仍然會繼續正常工作，但坦率地講，它的局限性越來越明顯，相反，PNG更加一致，應用范圍更廣。

Favicon.ico 是為舊版的IE而生，對於其他浏覽器和新版的IE，我們傾向於使用PNG圖標，那麼我們應該怎樣設置它的尺寸呢？接下來，我們探討一下這個問題。

問：在移動平台上我們需要什麼樣的格式？

根據AmartInsights的數據顯示，超過26%的網站流量是來自智能手機和平板，那麼在未來，我們需要使用什麼樣的格式呢？

A：當然是Favicon.ico，截至目前它已經存在15年了。
B：PNG格式圖標。你都說了要繼續探討這個了~
C：Apple Touch Icon
D：反正無論如何都不會在ABC中列出正確答案……

備注：在iPhone,iPad,iTouch的safari上可以使用添加到主屏按鈕將網站添加到主屏幕上。apple-touch-icon是IOS設備的私有標簽，如果設置了相應apple-touch-icon標簽，則添加到主屏上的圖標會使用指定的圖片。Apple-touch-icon 標簽支持sizes屬性，可以用來放置對應不同的設備。

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

比起傳統的桌面端浏覽器，移動端平台更加龐雜，屏幕尺寸和分辨率也差異巨大，iOS和Android兩家割據，並不是像互聯網剛剛興起的時候WIndows一家獨大之時那麼容易推廣標准。所以，你不用期待一個移動端Favicon 應付所有需求。

問：那麼PNG格式應該使用哪些尺寸呢？

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

答：D。當然，這還不是全部。你還需要為老版的Opera的快速撥號界面准備 160×160 尺寸的圖標，而Chrome 網上商店的圖標還需要128×128 尺寸的圖標。所以，在選取尺寸的時候需要考慮它到底要支持哪些平台。

問：Apple Touch Icon 的尺寸應設定為多少？

答：早期的時候，你只需要准備57×57的圖標就行，但是現在，你需要制作高達152×152 的圖標。

在iPhone發布之後，Apple Touch icon的尺寸發生過3次變化。

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

這樣一來，iOS上圖標尺寸就有了2x2x2=8種規格：

老版的57×57的Apple Touch icon 在視網膜屏幕上的效果很模糊。

152×152 的Apple Touch icon 在視網膜上效果很清晰。

如果你沒有猜對Apple Touch icon的正確尺寸，不要自責。在全球最靠前的5000個網站中，能用對Apple Touch icon的不到4%。

有人可能會說，制作8個版本的Apple Touch icon沒有必要，但是你至少需要備好一個152×152的圖標。這能確保運行iOS7的視網膜屏幕iPad能夠正常顯示圖標，而分辨率較低的iOS設備也能按比例縮小，顯示效果也不會差。

問：有必要在HTML中聲明Apple Touch icon麼？

A：不知道。
B：有必要。否則iOS怎麼能識別它們？
C：沒必要。按照Apple的習慣來放置圖標就夠了，iOS設備無論如何都會找到它們的。
D：沒有必要，但是……

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

<link rel="apple-touch-icon" sizes="57x57" href="/app