如何在網頁標題欄title加入icon圖標？

阿新 • • 發佈：2018-05-25

mil 地址註意正常 pan win 百度 blog 實現

打開某一個網頁會在瀏覽器的標簽欄處顯示該網頁的標題和圖標，當網頁被添加到收藏夾或者書簽中時也會出現網頁的圖標，怎麽在網頁title左邊顯示網頁的ico圖標呢？

方法一是：找一個或者作一個格式為ico的圖片，然後把圖片的名字改為favicon.ico，像素大小為16*16，所使用的顏色不得超過16色，然後再把favicon.ico放到網站的根目錄下就行了。

這樣的話瀏覽器會不停的搜索您的網站的根目錄，只要它一發現了名字叫做favicon.ico 這個圖片，就會將該圖標顯示在訪問者的地址欄和收藏夾列表中了。

另一種實現方法是在網頁HEAD標記中添加如下代碼：

標題欄：
<link rel="icon" href="ico地址" type="image/x-icon">

收藏夾：
<link rel="shortcut icon" href="ico地址" type="image/x-icon">

註意：圖標要用 16*16 色的。。。

其實很多軟件可以制作圖標的，你在百度搜一下圖標制作軟件就可能了。

另外，如果將 16*16 的 bmp 文件改為 ico ，在WINDOWS 支持，但放在瀏覽器或別的軟件就會出錯。

如：<HEAD> <LINK REL=”SHORTCUT ICON” HREF=”http://www.anjoweb.com/favicon.ico”></HEAD>使用這個做法的話，就不一定要把圖形文件放在網站的根目錄下面了，你可以放在任何位置，甚至直接連結到其他網站上面的圖形文件也可以，而且圖形文件的文件名也不一定要叫做 favicon.ico，可以自己隨便取。不過要註意的是使用這個做法的話，只有在把有加入上面 HTML 語法的頁面加入書簽的時候才會有作用。

我開始使用的是第一種方法，當時沒有註意到圖標的像素大小限制，用的是128*128的ico圖標，在Chrome瀏覽器中顯示正常，不過在IE中不顯示。所以還是建議按規則生成圖標。