2007年6月2日 星期六

為你的網站加個小圖示---Favicon

這個功能,只針對使用Firefox的瀏覽器,ie6完全無法作用,而ie7會顯示一個資料夾的樣子。


可以看到很多網站的網址前方的有個小圖示,很可愛,也讓你的網站辨識度也提高,挑選一個符合你網站的圖示,不僅美化也能在加入書籤時,有個不同於其他書籤的明顯提示,那要如何作呢?

首先選擇一個你要的圖,盡量是比較簡單的gif或是png的圖,大小大概16*16,這樣縮圖後也會比較清晰,然後到 FavIcon from Pics網站

上載你的圖,然後按下 Generate FavIcon.ico 這個按鈕,就可以下載你的圖示了,

下載後會有gif、ico、png檔,如果你是用png檔去轉檔,是沒有gif檔的,只有ico檔,然後把gif或是ico檔放在適當的地方,我的做法是在blogger用一個文章草稿去存這些圖片,你也可以存在你的網路硬碟裡,如果是用ico檔也可以,不過因為blogger是不接受ico圖片檔的存檔,所以我都是用gif檔,或是你可以存在Googlepages也可以,我都把一些js、pdf、ico檔存在這裡,很好用的。

接下來在你的html語法裡找到這行(記得修改html前都要先儲存舊的模版,如果失敗了,才能恢復原狀。)
<title><data:blog.pageTitle/></title>
在這行前面加上這段語法即可
<link href=’圖片網址’ rel='shortcut icon'/>
然後按儲存,當你用Firefox連結到你的網頁時,就會出現圖示了,加入bookmark後,第二次再連結,書籤列也會出現圖示了。

這個網站工具蠻好用的,只要是你想要作成圖示檔的都可利用這個來轉,ico檔可以拿來作滑鼠圖示,桌面圖示,資料夾圖示等等,有興趣的人可以把系統裡的圖示都換成你自己的,也是很好玩的 。

延伸閱讀:
修正Favicon圖示消失的錯誤

7 則留言:

  1. 您好,我依照您的方法作,但是在ie看到的圖卻不是我放在網頁空間的圖示,不知道是哪裡出問題了,不知道您可以幫我看一下嗎?
    謝謝您!因為常來逛您的部落格收穫很多,又看到您很熱心幫忙回答問題,所以也鼓起勇氣勞駕您,真不好意思.
    我的部落格網址
    http://winnerlaicafe.blogspot.com/

    回覆刪除
  2. 文章第一行有寫
    《這個功能,只針對使用Firefox的瀏覽器,ie6完全無法作用,而ie7會顯示一個資料夾的樣子》
    所以在ie是無效的,在firefox我看到的是三個資料夾疊在一起的圖示,希望對你有幫助。

    回覆刪除
  3. 啊是的,您確實有這麼說,真是抱歉,我當時忘了,真的很謝謝您的解答!!不過我自己也試過用firefox看,也是看到三個資料夾疊在一起的圖示,不過我用的是復古手工咖啡磨豆機的圖示,不知道為何會變成資料夾???

    回覆刪除
  4. 你的圖片網址是
    http://winnerlai.cafe.googlepages.com/favicon.ico
    我下載後也是三個資料夾的圖形,你要不要再確認一下,或是改成gif檔看看。

    回覆刪除
  5. 謝謝您,改成GIF檔之後用FIREFOX瀏覽已經是磨豆機的圖示了,感激不盡。

    回覆刪除
  6. 我發現如果貼兩行(一行是ico的,一行是gif的)就比較沒有瀏覽器顯示問題的樣子~
    我的程式碼:
    <link href="http://shiyou0130011.googlepages.com/BAOU.gif" rel="icon" type="image/gif"/>
    <link href="http://shiyou0130011.googlepages.com/BAOU.ico" rel="shortcut icon"/>
    經過測試,IE OK,Google Chrome OK,不過沒有火狐等的其他瀏覽器,所以不知道其他的O不OK……

    回覆刪除
  7. 謝謝小雨的細心測試,我再來試看看。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能