讓部落格也有自己專屬的顯示 Icon

想要自己的blog有個辨識的iocn,讓別人在加入我的最愛,或是瀏覽你的blog,有個特別的icon,顯示在網址及網站前面,就像Gmail也有個特別的小紅信箱. 黑米書籤就有個紅綠相間HD(目前我是紅底白色的J)

這個其實叫Favicon,一般預設令名為Favicon.ico.要怎做呢? 其實很簡單,使用小畫家或是其他繪圖軟體

Step1: 建議 16*16 px 大小的 icon
Step2: 背景可以透明或是有顏色
Step3: 顯示的文字部分,建議越簡單越好,可以用英文或是數字,不要超過兩個字
Step4: 儲存檔案, 副檔名選擇 .ioc(png , gif , jpg) 都可以,但是設定會有點不同
Step5: 上傳icon檔案檔案到網路空間
Step6: 修改blog平台的設定,將以下的程式加入到 < head> 及< /head>
如果是ico檔案
< href="http://xxx.xxx.xx/abc.ico" rel="shortcut">
如果是其他檔案,例如 png, jpg, gif,還要加上 type="image/gif" (這裡是以 gif為舉例,可以根據為png 或是 jpg 來變更)
< href="'http://xxx.xxx.xx/abc.gif'" rel="'shortcut" type="image/gif">

不過,我試過,其實不加也沒有關係,真是有趣
另外,如果你想要更炫,更有趣,就要使用gif 格式,因為 gif 可以弄成動態圖檔

這裡要注意的是
1. href 前面要加上 link ( 就像是 link href='http://xxx.xxx.xx/abc.ico' )
2. href='http://xxx.xxx.xx/abc.ico' ,這裡是你檔案的網路位置

如果是使用IE,目前只有在收入我的最愛時候,可以看到圖形
如果是是用Firefox或其他有分頁功能的瀏覽器,則可以在分頁tab看到你部落格名稱前面及網址前面,都可以看到你獨一無二的icon

這其實設定並不難,只要在程式碼 加入一行code,如下圖 就是我的寫法
如果是使用blogger管理介面,
登入後 ,再進入到 範本/修改HTML
將 展開小裝置範本 打勾
在程式碼中找到 < head > ,在下方加上以下的寫法就可以了



ps. 感謝 網友 ForeverFish的回應,讓我仔細去解決很多網路平台不允許上傳 ico檔案這個問題. 後來我找到,就是指定為png, gif, jpg 圖形檔案都可以成功,所以就解決無法上傳ico的情況了. 感謝ForeverFish,讓我有機會了解更多

留言

匿名表示…
哇,看到這篇真是太棒了!
之前一直很狐疑為什麼有人的獨立網址前會有自己的專屬logo呢?是怎麼做的呢?可是由於個性疏懶,(只有旅遊的時候跑很快^W^)所以,一直沒去探討答案,沒想到今天在此就突然發現,真是如獲至寶啊!
可是,看那個操作,好像還是有點小難,請問有沒有懶人包可以用啊?(這是討打題,不用理我~_^)
多謝分享~
Mr.J寫道…
謝謝你的鼓勵...懶人包喔...可能現在沒有ㄝ

如果你設定上有問題..你可以告訴我 我可以幫你設定

其實 不會很難阿 只是加一行程式碼
匿名表示…
我覺得問題是要把 .ico 這個小檔案放在那裡?Roodo & 天空 & Yahoo Blog 都不允許 .ico 上傳成為圖檔。

要有自己的網路空間才能用。
Mr.J寫道…
謝謝 ForeverFish提到的問題, 現在解決了, 使用 png, jpg, gif 圖形格式也可以. 感謝ForeverFish,讓我有機會了解更多
匿名表示…
嗯,不好意思,設了半天,好像沒有成效.
找不到css裡的head/head,可能得拜託您教我放在pixnet版型裡的語法了,感謝^^
Mr.J寫道…
to birgit

關於pixnet
我也還在尋找解決的方法
不好找

我會努力找出來
匿名表示…
在Xuite裡的CSS找不到head這一段耶…
Mr.J寫道…
to 章魚小丸子
Xuite裡的CSS...只能設定CSS部分

請問Xuite 可以設定HTML/javascript 嗎
就像樂多的自由欄位
jeromychien寫道…
看到有關程式什麼的,都會覺得要是有個好友能直接把我的想法做出來,免得我要動手又不一定弄得好,我就愛死他了~
Mr.J寫道…
如果我有空 我可以幫你弄...不過 你可以先看看我寫的...應該不會很難吧(希望啦....呵呵)....在blogger...修改程式..自由度很高
miniRain寫道…
能不能敎我怎麼在blogger怎麼修改?
Mr.J寫道…
to BETTY

你先到blogger管理介面,
登入後 ,再進入到 範本/修改HTML
將 展開小裝置範本 打勾
接下來的 修改方式 就按照我文章中的步驟就可以了