Favicon

Favicon

Favicon是favorites icon的縮寫,亦被稱為website icon(網頁圖示)、page icon(頁面圖示)或urlicon(URL圖示)。Favicon是與某個網站或網頁相關聯的圖示。

歷史

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類型不能被遵守標準的瀏覽器理解。

•“.ico”檔案類型(一種用於MicrosoftWindows上圖示的光柵格式)沒有一個註冊的MIME類型,而且似乎在當時也不能被多數瀏覽器理解。然而2003年,這一格式在IANA獲得註冊,其MIME類型是image/vnd.microsoft.icon,進而消除了此問題的第一部分。

•被認為是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——通過這種方式,你在你的網站和網站的訪問者之間創造了一些視覺連線。

然而,收藏夾圖示的設計可能是有難度的——不是那么容易就能創造一個漂亮的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

2009年GOOGLE啟用了新的收藏夾圖示。這一次啟用的正式的收藏夾圖示,是從所有徵集的作品中選中的由巴西一個在讀大學生André Resende的作品中變種而來的。Google說他設計的“白色字母g映襯在由顏色色塊背景上的設計易於辨認而且魅力十足,它抓住了Google的精髓"。Google搜尋產品和用戶體驗副總裁Marissa Mayer說:Google做出改變,主要是為了適應像iPhone這樣新的手機平台的需要。

相關詞條

相關搜尋

熱門詞條

聯絡我們