讓部落格也有自己專屬的顯示 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,讓我有機會了解更多