v 為你的網站加個小圖示---Favicon >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...