自訂網址列圖示﹝FavIcon﹞
自訂網址列上的圖示，在網頁設計上算是一項裝飾性質的小技倆，因為有些網友會來詢問方法，故在此簡單的介紹一下：
首先準備一個大小為 16 x 16 像素的圖示(.ico)檔，取名為 favicon.ico，並上傳到網站的根目錄下﹝其他目錄或網頁空間亦可﹞。
然後在網頁原始碼 <head> 與 </head> 之間放上這段語法：
<link rel="shortcut icon" href="http://圖示所在目錄/favicon.ico" type="image/x-icon" />這樣就完成了，很簡單吧！若再加上下面這段語法：
<link rel="Bookmark" href="http://圖示所在目錄/favicon.ico" type="image/x-icon" />也可以讓你的圖示呈現在書籤或我的最愛當中，不過根據我的測試，沒有額外加上這段語法仍然可以達成，只要重新開啟瀏覽器就會顯示出來。
若是你的手邊沒有適合的圖示，可以到 FavIcon from Pics 這個網站來，選擇一張自己的圖片﹝大小及格式不拘﹞，按下 [Generate FavIcon.ico]，生成後再按下 [Download FavIcon] 即可下載 ZIP 檔，用 Winzip 或 7-zip 等軟體解壓縮後，就會有同時支援 32 x 32 及 16 x 16 兩種尺寸的圖示出現，然後把這個圖示上傳到網頁﹝伺服器﹞空間即可。
註：若是 favicon.ico 這個檔名在某些網頁空間出現無法使用的情況，可以改成其他檔名﹝例如 myfavicon.ico﹞，只要連結網址記得跟著改就好。
現在較新的瀏覽器也支援使用 GIF 或 PNG 格式作為網址列圖示，以 GIF 為例，語法如下：
<link rel="icon" href="http://圖示所在目錄/favicon.gif" type="image/gif" />至於 PNG 格式就依樣畫葫蘆，把 gif 改成 png 就好。
Blogger 及 Pixnet 等部落格系統已內建相關功能可以直接設定，不必再費事填寫程式碼了。
喜歡這篇文章嗎？
告訴他這篇文章觸動了您的心！
原本我也想弄个favicon,然后又忘了。
回覆刪除这篇好，我会把它记载在delicious.
谢谢。
期待看到你的icon
回覆刪除也謝謝你的收藏
耶，你人真好。
回覆刪除在文章上您說：「並上傳到網站的根目錄下﹝其他目錄亦可﹞」，呃~~我想請教一下，根目錄是在哪裡啊，很笨的問題哦~
回覆刪除像我是用天空的blog，
我只會上傳相片到放相簿的地方，
但是在網站上面的話，我要怎麼找呢?
若您不嫌煩的話，再請您教我~
對不起哦~給您造成麻煩。
八方小姐：
回覆刪除根目錄就是在最上層網址(例如 http://www.abc.com/)下，除非是自己架設，否則一般的部落格是無法上傳到此的，所以只能將 favicon 上傳到其他目錄或網頁空間。妳有 Google 帳號就可以使用 Page Creator 來存放檔案，使用方法網路上可以查的到。
您好,我也想請教一下,我的網址列出現的圖不是我上傳的圖示,不知道是哪裡有問題,可以請您幫我看看嗎?謝謝您
回覆刪除不好意思,我忘記告訴您我的部落格網址
回覆刪除http://winnerlaicafe.blogspot.com/
麻煩您了,我原本上傳到Page Creator的小圖示是手工磨豆機的小圖,檔名是ico,但是出現的卻不是=.= 請您幫我看看,謝謝!
巫師：
回覆刪除你的設定並沒有錯，是圖示的問題，你自己再把http://winner.lai.googlepages.com/favicon.ico檢查看看就知道了，應該是拿錯圖示上傳了吧！
謝謝您的解答,我檢查過上傳的圖示是正確的,只是仍然在firefox和ie看的仍然都是三個資料夾疊在一起的圖示.
回覆刪除巫師：
回覆刪除我發現是 Page Creator 對 favicon.ico 這個檔名有問題，只要改名就可以了，例如改成 myfavicon.ico 再上傳就可以用了。
OK....
回覆刪除http://fshsli.blogspot.com/2007/09/favicon.html#comments
我會加註遇見瓦特比
Terry:
回覆刪除加註作者或是網誌名稱不一定要在文章標題上，可以在內文第一行(附帶本文網址連結)，或擺在最後一行(附帶本文網址連結)也可以。
因為我的blog怪怪的
回覆刪除所以無法加上連結說
請問一下，因為我是用wordpress架站的
回覆刪除可是wordpress好像是以php為基礎
那我要把語法張貼在哪個檔案的哪一段啊？
亡國之秋：
回覆刪除不好意思，我沒使用過 Wordpress 所以無法給你正確答案。
很棒的BLOG，感謝分享....
回覆刪除Derek
(link rel="shortcut icon" href="http:// C:\Documents and Settings\jj dream\Desktop\Buy Kiwi Made - General Info\Buy Kiwi Made Main Website Folder\images\favicon.ico/)
回覆刪除前後的<>暫時改成()，不然無法留言
我按照你的方法，用了這一個！但為什麼顯示不出來？！
真是不好意思，麻煩你了！
T&J:
回覆刪除請你把 favicon.ico 上傳到某個網頁空間後，再行連結。如果你的 http://www.buykiwimade.net/ 這個網站所在空間允許上傳檔案，直接上傳到根目錄下，就變成 http://www.buykiwimade.net/favicon.ico
非常謝謝你的抽空指導！已成功上傳小圖示！
回覆刪除祝你新年快樂！
現在網誌已經內建這項功能，火狐、微軟和孤狗網路瀏覽器都支援。
回覆刪除實用，感謝
回覆刪除