favicon.ico是什么?
所謂favicon
,即Favorites Icon
的縮寫,是指顯示在瀏覽器收藏夾、地址欄和標簽標題前面的個性化圖標。 以圖標的方式區別不同的網站。
favicon.ico是一個網站必要的嗎?
不是必要的,當您使用瀏覽器瀏覽不同站點時,瀏覽器將自動發送請求。 如果您的瀏覽器收到有效 favicon.ico 文件,將顯示此圖標。 如果未收到,則不會顯示特殊圖標,會報404錯誤,並且會記錄到錯誤日志中,所以最好的設置。
favicon.ico怎么設置?
第一種方式:放在根目錄
這種方法最簡單,在服務器根目錄下放一個 favicon.ico
的文件,瀏覽器發現后就會使用。(把做好的favicon.ico圖標文件上傳到網站根目錄,並命名為xxx.icon就可以了; )
注:這種方式,ico
文件的名稱一定要叫:favicon
第二種方法:link標簽
在head里面加入代碼:
<link rel="shortcut icon" href="ico文件url">
或
<link rel="icon" href="../favicon.ico">
或
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
注:這種方式,ico
文件的名稱就可任意命名了。
第一種方法設置的是全站的,第二種方法可以針對某個網頁單獨設置ico(但是該圖標的路徑一定要使用絕對路徑)
。
注意,我們直接使用rel="icon"
就可以了,現在很多網站依然使用rel="shortcut icon"
,這是一種過時的用法,可以被淘汰掉了。
可以直接使用:
<link rel="icon" href="/path/to/icons/favicon.ico" type="image/x-icon">
favicon的格式一定是ico格式嗎?
favicon
的格式不一定是ico
格式,它可以是png
,jpg
甚至是gif
,不過ico
格式是所有瀏覽器都支持的。
favicon.ico
的尺寸有16×16、32×32、48×48,在添加到桌面、任務欄小尺寸的圖標就不是很理想了,這就需要多種尺寸兼容各種設備和情況。
favicon.icon文件怎么制作?
簡單的方式就是在線制作,推薦網址:ico
圖標在線制作: http://www.faviconico.org/
如何讓網站不去請求favorites icon?
在做 H5 混合應用的時候,不希望產生 favicon.ico 的請求。可以在頁面的 <head> 區域,加上如下代碼實現屏蔽:
<link rel="icon" href="data:;base64,=">
或者詳細一點
<link rel="icon" href="data:image/ico;base64,aWNv">
補充
Favicon是favorites icon的縮寫,亦被稱為website icon(網頁圖標)、page icon(頁面圖標)或urlicon(URL圖標)。Favicon是與某個網站或網頁相關聯的圖標。網站設計者可以多種方式創建這種圖標,而目前也有很多網頁瀏覽器支持此功能。瀏覽器可以將favicon顯示於瀏覽器的地址欄中,也可置於書簽列表的網站名前,還可以放在標簽式瀏覽界面中的頁標題前。
最初,定義一個favicon的方法是將一個名為“favicon.ico”的文件置於Web服務器的根目錄下,Internet Explorer的收藏夾(即書簽)可以自動顯示該文件。[1] 后來出現了一種更為靈活的方法,即使用HTML來為任何一個網頁指示其圖標所存儲的位置。這種方法是通過在頁面的<head>
部分添加兩個link組件來實現的。這樣,任何一個適當大小的(16×16像素或更大)的圖像都可以用作favicon。盡管如此,多數情況下仍然使用ICO格式。其他網頁瀏覽器現在也支持PNG(便攜式網絡圖片)格式,和GIF(圖形交換格式)動畫圖像格式。
市面上多數瀏覽器同時支持上述兩種方法。正因此,網絡服務器要接受很多對“favicon.ico”文件的請求,即使該文件根本不存在。網站管理員對此很不滿,因為這樣會增加大量的服務器日志項,並導致很多不必要的磁盤讀取和CPU、網絡資源的占用。另一個常見的問題是,當清除瀏覽器的緩存后,favicon可能會消失。
標准化
Favicon功能最早由微軟創設,而微軟公司的Internet Explorer網頁瀏覽器會對每一個網站都請求favicon。微軟支持的link標簽不遵從World Wide Web Consortium(W3C,萬維網聯盟)的HTML建議[1],因為:
-
rel
屬性必須包含一個用空格作分隔符的link類型的列表,所以一個包含兩詞的link類型不能被遵守標准的瀏覽器理解。 -
“.ico”文件類型(一種用於Microsoft Windows上圖標的光柵格式)沒有一個注冊的MIME類型,而且似乎在當時也不能被多數瀏覽器理解。然而2003年,這一格式在IANA獲得注冊,其MIME類型是image/vnd.microsoft.icon,進而消除了此問題的第一部分。
-
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屬性中進行自定義。
指導
過去,為保證favicon出現,網站設計者和開發者采用了多種方法。很難明確地保證favicon可以在所有電腦上顯示,即使是用同一版本的一種瀏覽器。
下列代碼另一個局限就是它把favicon關聯到了某個特定的HTML或XHTML文檔上。為避免這一點,favicon.ico文件應置於根目錄下。多數瀏覽器將自動檢測並使用它。
-
建議包含以下兩行HTML代碼:
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
然而,只有第一行是必須的,因為“shortcut icon”字符串將被多數遵守標准的瀏覽器識別為列出可能的關鍵詞(“shortcut”將被忽略,而僅使用“icon”);而Internet Explorer將會把它作為一個單獨的名稱(“shortcut icon”)。這樣做的結果是所有瀏覽器都可以理解此代碼。只有當希望為新瀏覽器提供另一種備用圖像(例如動畫GIF)時,才有必要添加第二行。
-
在HTML中,
link
組件必須在head
組件里(在<head>
和</head>
之間)。 -
對於XHTML,link必須使用“
/>
”結束(或“></link>
”),而不可以使用“>
”結束。 -
href
可以,但不必指向/favicon.ico
的位置。它可以指向任何URL。 -
圖像通常可以使用任何被瀏覽器支持的圖像格式。
-
.ico
文件格式通常可以被所有可以顯示favicon的瀏覽器讀取。 -
設置服務器,以發送正確的MIME標識:
-
ICO 文件
image/vnd.microsoft.icon
(或者亦可出於兼容性原因使用image/x-icon
。然而最好使用IANA注冊的MIME類型,因為多數主流瀏覽器現在支持它) -
GIF 文件
image/gif
-
PNG 文件
image/png
-
-
-
ICO:包括多種分辨率(最常使用的是16×16和32×32,Mac OS X有時使用64×64和128×128)以及位深(比特每像素)(多數使用4、8、24 bpp,即16、256和1600萬色)。
-
GIF:使用16×16,256色。
-
PNG:使用16×16,256色或24位。
-
注意:當favicon.ico
被置於文檔根目錄時,將會被一些不處理link
組件的瀏覽器找到,即使沒有您的站點上沒有指向它的鏈接。
參考
https://zh.wikipedia.org/wiki/Favicon
https://www.zhangxinxu.com/wordpress/2019/06/html-favicon-size-ico-generator/