基本介紹
歷史,簡要介紹,設計概念,製作過程,呈現方式,設計舉例,
歷史
1999年3月，Internet Explorer最早僅僅將favicon用於收藏夾（例如MSIE 5.0）。這產生了一些關於隱私問題的考慮，因為網站擁有者可以通過檢查訪問日誌察看有多少人下載了favicon.ico檔案，判斷有多少人將他們的網站放入收藏夾中。然而，自從許多其他瀏覽器開始在每次訪問時都將favicon顯示在地址欄上，這就不再是一個問題了。
標準化
Favicon功能最早由微軟創設，而微軟公司的Internet Explorer網頁瀏覽器會對每一個網站都請求favicon。微軟支持的link標籤不遵從World Wide Web Consortium（W3C，全球資訊網聯盟）的HTML建議，因為：
- rel屬性必須包含一個用空格作分隔設定的link類型的列表，所以一個包含兩詞的link類型不能被遵守標準的瀏覽器理解。
- 被認為是link squatting（連結劫持）或URI squatting（URI劫持）。
Mozilla瀏覽器通過一種遵從Web標準的方法添加了對favicon的支持。它採用rel="icon"並允許網路設計人員添加任何支持的圖像格式的favicon。例如<link rel="icon" type="image/png" href="/path/image.png" />。後來鑒於此功能將被用於所有新內容，多數瀏覽器都對此功能增加了支持。
根據《HTML 4.01 Specification W3C Recommendation 24 December 1999》，rel屬性的取值僅有：
- Alternate
- Stylesheet
- Start
- Next
- Prev
- Contents
- Index
- Glossary
- Copyright
- Chapter
- Section
- Subsection
- Appendix
- Help
- Bookmark
如果要採用其他值，應當在head標籤中的profile屬性中進行自定義。
簡要介紹
收藏夾圖示就是出現在瀏覽器地址欄左側的那個小圖示。收藏夾圖示，也作網站頭像。當然，這不僅僅是收藏夾圖示的全部，根據瀏覽器的不同，收藏夾圖示顯示也有所區別：在大多數主流瀏覽器如FireFox和Internet Explorer (5.5及以上版本)中，收藏夾圖示不僅在收藏夾中顯示，還會同時出現在地址欄上，這時用戶可以拖曳收藏夾圖示到桌面以建立到網站的捷徑；除此之外，標籤式瀏覽器甚至還有不少擴展的功能，如FireFox甚至支持動畫格式的收藏夾圖示等。
從特定的技術角度看，收藏夾圖示也並不只是僅僅讓網站給人更專業的觀感，也可以在一定程度上減輕伺服器的流量頻寬占用：一般為了提高網站的可用性，我們都會為自己的網站創建一個自定義的404錯誤檔案，在這種情況下，如果網站沒有相應的favicon.ico檔案，每當有用戶收藏網站/網頁時， Web伺服器都會調用這個自定義的404檔案，並在網站的錯誤日誌中記錄。這顯然是應該予以避免的。
favicon.ico檔案生成還是有些難度的：它不是標準的點陣圖檔案，需要用專門的收藏夾圖示編輯器生成。現在網上有線上favicon生成器服務：直接上傳你喜歡的圖片，直接生成16*16像素的favicon.ico檔案，還有線上預覽功能。
設計概念
收藏夾圖示，袖珍圖形，適用於比較細緻的網站，可以在瀏覽器的地址欄里顯示，緊鄰著書籤列表里網站的名字，還緊鄰著檔案對話框界面的網頁標題。要是立即被辨識出來的話，收藏夾圖示應該悅目，並且要適合頁面的設計或標識。事實上，如果你在網站上使用收藏夾圖示，用戶可以輕易在他們的書籤里找到你的URL——通過這種方式，你在你的網站和網站的訪問者之間創造了一些視覺連線。
百度的favicon
百度的favicon然而，收藏夾圖示的設計可能是有難度的——不是那么容易就能創造一個漂亮的16×16px的迷你圖示。儘管如此，部分設計師的運用已經取得了巨大的成效。連合活字(含有數個常用固定字母的活字,如an) 配合清晰的幾何結構比單純的字型和抽象的圖像更能起作用，顏色的選取應當符合當前Web 2.0的趨勢。讓我們來看看能激發你靈感的50個漂亮收藏夾圖示. 你可以點擊收藏夾圖示——它們可以打開一個頁面，而這頁面是用圖像作為頁面圖示。
製作過程
製作Favicon.ico的方法相當簡單。
第一步，利用圖形工具創建2個反映網站主題的256色的小圖片：1個為32×32像素，另一個為16 ×16像素。需要注意的是，調色板要選用“Windows 默認調色板”，不然，在最終的效果展示中圖形可能會發生迥異於您初衷的顏色上變化。
在很多關於Favicon.ico的說明中，常見到要求圖片為16色的說法，應該說這類說法大大過時：在早期如Windows 95時期，16色的Favicon.ico可能是個穩妥的選擇，保證其在大多數情況下正常使用，但現在，完全不存在那類限制，16色只能使圖示的展示效果大大降低。
至於在瀏覽器中使用時16×16像素的圖片已經足夠，為什麼還要準備32×32像素的圖片，原因在於，正如上文所言，收藏夾圖示也顯示在地址欄中，用戶可以拖曳收藏夾圖示到桌面以建立到網站的捷徑，而桌面圖示則要以32×32顯示的，如果您的Favicon.ico不包括32像素的圖片，系統就只能使用默認的瀏覽器圖示來標註網站/網頁，如Internet Explorer的藍色“e”，起不到我們意欲通過Favicon.ico打造網站品牌的作用。
第二步，使用如Image2Ico之類的小程式即可將2張圖片轉換到一個Icon檔案中。也可以通過可以線上製作收藏夾圖示的網站來製作，不過，需要注意的是，這個網站要求圖片源檔案格式為Pic。
呈現方式
直接在網站的頂級域名外加上“/favicon.ico”即可看到。
設計舉例
GOOGLE
