2009年10月18日星期日

Blogger Favicon 如何讓部落格有瀏覽器書籤和網址列專屬圖示?

想幫自己的部落格網址列製作專屬於自己的圖示嗎?
下圖是我的部落格示範 ~

Favicon是favorites icon的縮寫,亦被稱為website icon(網頁圖標)、page icon(頁面圖標)或urlicon(URL圖標)。 Favicon是與某個網站或網頁相關聯的圖標。網站設計者可以多種方式建立這種圖標,而目前也有很多網頁瀏覽器支持此功能。瀏覽器可以將favicon顯示於瀏覽器的地址欄中,也可置於書籤列表的網站名前,還可以放在標籤式瀏覽界面中的頁標題前。詳解→維基百科


首先,必須您使用的部落格有開放用戶編輯HTML版面,這樣您才可以透過修改HTML,來連結使用自己製作的Favicon,很開心Blogger平台有支援。接下來,選擇自己喜歡的圖片來製作囉~ 網路上有許多網站提供免費的「ico」下載,也有一些網頁提供在線圖標設計。 ★ 圖標下載
1- Conscious Choices: 免費icon 網站/下載
2- 大量ICON圖標下載網站匯總- wowbox blog (網頁設計知識庫)
3- freeiconsweb(特別推薦:提供15000個圖標下載)
4- 來吧!胡說八道! » Post Topic » 線上免費 Icon 資源下載
5- 圖示搜尋網【ICONFINDER】 提供png、ico二種格式多種呎吋下載
6- ICON圖示收集站【IconArchive】35個分類,超過2,4100個圖示!
7- blogmarks多到不行的ICON下載


★ 4個手工在線製作ICO圖標的網站
favicon 在線製作,不需要註冊。
Online Icon Maker 通過上傳圖片製作ico和icon圖標,另有圖庫備用
FavIcon 可以製作透明效果的ico圖標,也是通過上傳圖片來進行轉換。
Favicon Editor 通過上傳圖片轉換ICO圖標。




2010.03補充 :
香腸炒魷魚推薦 IcoFX 免費Icon圖示轉換、編輯器軟體 (免安裝很好用)


我使用 http://www.html-kit.com/favicon/ 製作

下載圖標包後得到2個檔案,分別是.gif 與.ico(我以.png展示),要將這兩個檔案上傳到有提供外連的圖片存檔空間。
有提供上傳的空間 - 推薦微軟的 SkyDrive - Windows Live 免費儲存空間。
使用你的MSN帳號直接登入,或者申請註冊一個新的空間帳戶,你就可以擁有25GB的免費網路空間,上傳在公開的文件上才能外聯喔。上傳後取得圖片的網址,進入Blogger後台設定Favicon 。進入版面配置→修改HTML,在進行修改範本之前,記得先「下載完整範本」,把你目前的範本備份下來。小心發生錯誤,才可以還原。
接下來將以下這段語法貼在範本內容中的<head>和</head>之間,建議就直接貼在第2個</head>的前面。
語法 :
<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon' type='image/x-icon'/>
<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>

按儲存範本就OK了喔~還有....必須使用火狐瀏覽器才能看到動態.gif檔

ブログパーツUL5
資訊來自: 電腦玩物
以下是我自己的存檔
<link href='http://ipulrw.blu.livefilestore.com/y1psvrJSqRr4qMlEdSRp_yk0Qs8UleZVe-AxtsnXFxW-YKrNybvgvp8tOYd-4sWrwFeLMNTra-UPFAiivaaZMuNjWrBLqAkCQkk/m01.ico?psid=1' rel='shortcut icon' type='image/x-icon'/>
<link href='http://api.ning.com:80/files/Vd-dZCIoPAUfR7UZyAtOHmkbcXwD3jUnPhnXMXjOJXEWR4grRz9Dc8ZTqaUk13hN2PENfsZwgiWuGU3Ubp3d7JLAf5WdTRx4/m.gif' rel='icon' type='image/gif'/>

沒有留言:

張貼留言