自製網站(網址列)圖示教學

當我們在逛一些網站的時候可能會發現,顯示在瀏覽器網址列前的小圖示會變成不同的圖案,或者當你將這個網站加入我的最愛以後,當你打開我的最愛列表時,也會發現這個網址的最前方也是這個小圖示,例如小樽的網站就有(如下圖)

 favicon.jpg

這是怎麼做到的呢?其實非常的簡單唷

1.首先你必須要先製作一張16X16像素的icon(.ico檔),至於怎麼製做呢?你可以使用軟體例如IconCool Editor,或者你也可以到FavIcon from Pics 這個網站來線上製造一張屬於自己的icon檔,完成之後,為他命名(例如小樽的叫skylogo.ico)

2.然後將他上傳到你的網頁空間下,你可以放在根目錄也可以放在任意資料夾只要你記的住

3.將你希望產生效果的網頁檔案打開,使用原始碼編輯模式,在<head></head>之間任意位置,插入以下兩條指令

<link rel=”shortcut icon” href=”圖示路徑/檔名.ico”/>
<link rel=”Bookmark” href=”圖示路徑/檔名.ico”/>

上述icon圖檔的路徑可以是絕對位置也可以是相對位置,如果你不確定網頁跟icon圖檔的相對關係,避免路徑出錯找不到圖檔的話可以使用絕對位置,上面兩斷指令第一段是將icon指定讓瀏覽器知道要到哪裡去找到這個網站的icon檔,第二段是處理書籤(bookmark)裡面的圖示,但是即使沒有寫第二行,只要你關閉重新開啟瀏覽器,瀏覽器也會自動幫你替換圖示,有寫的話馬上就會幫你更換圖示

  • Pingback: 來吧!胡說八道!()

  • Pingback: 來吧!打造你的個人化網址列小圖示! « Kueilin’s Weblog()

  • http://www.buykiwimade.net T&J

    非常謝謝你的指導,我試試看!

  • http://www.skyhunter.com.tw sky

    您客氣了
    祝您順利:p

  • 張先生

    我依上述填入 路徑及圖案檔名,依舊無法在網址列顯示圖騰,不知是哪裡有錯?請敎敎我吧。謝謝

    • sky

      如果確定有做的話~有可能是流覽器快取是舊的 如果有更新 記得清除快取在觀看 或者可以用別人的電腦試試看