2006年3月20日

自訂網址列圖示﹝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 檔,用 Winzip7-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 等部落格系統已內建相關功能可以直接設定,不必再費事填寫程式碼了。

21 則留言:

  1. 原本我也想弄个favicon,然后又忘了。
    这篇好,我会把它记载在delicious.
    谢谢。

    回覆刪除
  2. 期待看到你的icon
    也謝謝你的收藏

    回覆刪除
  3. 在文章上您說:「並上傳到網站的根目錄下﹝其他目錄亦可﹞」,呃~~我想請教一下,根目錄是在哪裡啊,很笨的問題哦~

    像我是用天空的blog,
    我只會上傳相片到放相簿的地方,
    但是在網站上面的話,我要怎麼找呢?

    若您不嫌煩的話,再請您教我~
    對不起哦~給您造成麻煩。

    回覆刪除
  4. 八方小姐:
    根目錄就是在最上層網址(例如 http://www.abc.com/)下,除非是自己架設,否則一般的部落格是無法上傳到此的,所以只能將 favicon 上傳到其他目錄或網頁空間。妳有 Google 帳號就可以使用 Page Creator 來存放檔案,使用方法網路上可以查的到。

    回覆刪除
  5. 您好,我也想請教一下,我的網址列出現的圖不是我上傳的圖示,不知道是哪裡有問題,可以請您幫我看看嗎?謝謝您

    回覆刪除
  6. 不好意思,我忘記告訴您我的部落格網址
    http://winnerlaicafe.blogspot.com/
    麻煩您了,我原本上傳到Page Creator的小圖示是手工磨豆機的小圖,檔名是ico,但是出現的卻不是=.= 請您幫我看看,謝謝!

    回覆刪除
  7. 巫師:
    你的設定並沒有錯,是圖示的問題,你自己再把http://winner.lai.googlepages.com/favicon.ico檢查看看就知道了,應該是拿錯圖示上傳了吧!

    回覆刪除
  8. 謝謝您的解答,我檢查過上傳的圖示是正確的,只是仍然在firefox和ie看的仍然都是三個資料夾疊在一起的圖示.

    回覆刪除
  9. 巫師:
    我發現是 Page Creator 對 favicon.ico 這個檔名有問題,只要改名就可以了,例如改成 myfavicon.ico 再上傳就可以用了。

    回覆刪除
  10. OK....
    http://fshsli.blogspot.com/2007/09/favicon.html#comments
    我會加註遇見瓦特比

    回覆刪除
  11. Terry:
    加註作者或是網誌名稱不一定要在文章標題上,可以在內文第一行(附帶本文網址連結),或擺在最後一行(附帶本文網址連結)也可以。

    回覆刪除
  12. 因為我的blog怪怪的
    所以無法加上連結說

    回覆刪除
  13. 請問一下,因為我是用wordpress架站的
    可是wordpress好像是以php為基礎
    那我要把語法張貼在哪個檔案的哪一段啊?

    回覆刪除
  14. 亡國之秋:
    不好意思,我沒使用過 Wordpress 所以無法給你正確答案。

    回覆刪除
  15. 很棒的BLOG,感謝分享....

    Derek

    回覆刪除
  16. (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/)

    前後的<>暫時改成(),不然無法留言

    我按照你的方法,用了這一個!但為什麼顯示不出來?!

    真是不好意思,麻煩你了!

    回覆刪除
  17. T&J:
    請你把 favicon.ico 上傳到某個網頁空間後,再行連結。如果你的 http://www.buykiwimade.net/ 這個網站所在空間允許上傳檔案,直接上傳到根目錄下,就變成 http://www.buykiwimade.net/favicon.ico

    回覆刪除
  18. 非常謝謝你的抽空指導!已成功上傳小圖示!

    祝你新年快樂!

    回覆刪除
  19. 現在網誌已經內建這項功能,火狐、微軟和孤狗網路瀏覽器都支援。

    回覆刪除
  20. *Aw, this was a really nice post. In idea I would like to put in writing like this additionally – taking time and actual effort to make a very good article… but what can I say… I procrastinate alot and by no means seem to get something done.

    Obat Sperma Encer
    Obat Keputihan Gatal
    obatbatukering.wordpress.com

    回覆刪除

歡迎您留下與本篇文章相關的回應,如果另有其他寶貴的意見,敬請移駕至我的留言版發言指教。若是回應內容與文章本身無關或是涉及不當的言論,格主將保留刪除與否的權利。


瓦特比的抓火狐推薦頁