2009年12月26日

Blogger Favicon 讓瀏覽器網址列顯示自製的個性專屬小圖示

⇩分享本文⇩
此篇教學大致分為四大部分︰
Favicon 介紹
製作 favicon 的要點&網站
上傳免費空間介紹 (Google Sites 協作平台)
Blogger 範本插入 favicon 程式碼

Favicon 簡單介紹︰
Favicon全名為→Favorite Icon ,
簡單說就是顯示在瀏覽器網址列上的網站小圖示,像下面的圖…
favicon-001←Chrome Browser
favicon-002←Firefox Browser
favicon-003 ←IE Browser

所以~看到這裡應該很清楚到底什麼是 Favicon 了吧!?
透過這小小的圖示,可以讓你的網站/部落格,看起來更有〝味道〞喔!
而維基百科(危機百科!?)是這麼解釋的︰
Faviconfavorites icon的縮寫,亦被稱為website icon(網頁圖標)、page icon(頁面圖標)或urlicon(URL圖標)。Favicon是與某個網站網頁相關聯的圖標。網站設計者可以多種方式建立這種圖標,而目前也有很多網頁瀏覽器支持此功能。瀏覽器可以將favicon顯示於瀏覽器的地址欄中,也可置於書籤列表的網站名前,還可以放在標籤式瀏覽界面中的頁標題前。

詳情請看 Favicon (維基百科) 真的介紹的頗詳細。
製作小圖示的要點︰
1.雖沒有限制一定大小,但一般以 16X16 (pixel) 為主流。
2.常見使用之圖片格式有 ICO、GIF、PNG 三種,建議使用 ICO 格式
3.需使用特殊製作之工具/軟體,不是自己亂存成 *.ico 就能正常顯示。





製作小圖示之網站︰
1.Favicon.cc
可直接一格一格畫、或匯入圖檔、或按〝Use Animation〞製作動態圖示。
favicon-005

2.FavIcon from Pics2.0
可上傳做好的圖檔,會自動生成〝一個動畫檔一個圖片檔
favicon-004

上傳圖示至免費空間︰
作好的圖片,上傳至穩定的圖片空間,建議可上傳至 Google Sites 協作平台,
一般免費的普通使用者有100M的空間,單檔上傳限制為10M

(題外話︰阿啦一直到今天才知道,自己慣用的 Google Page Creator 收攤了,這消息一年多前就釋出了,而我的圖片連結都還在,才傻傻的都沒發現,還以為只是不給新用戶注冊而已)


而 Google Apps 的用戶可免費擁有 10G 的超大空間,
此申請方法請詳見其他教學︰就是教不落香腸炒魷魚

favicon-006

Google 協作平台如何取得圖片連結?
請看下圖,上傳完畢的圖片檔名下方,有一個〝檢視〞的連結,
以我自己的圖片為例,滑鼠移到〝檢視〞時,左下方顯示為
http://sites.google.com/site/lasjargon/blogger-photo/favicon.ico?attredirects=0 可按滑鼠右鍵,選〝複製連結網址〞,實際應用可以只貼上
http://sites.google.com/site/lasjargon/blogger-photo/favicon.ico 省去後面的 ?attredirects=0

favicon-007

重頭戲~插入程式碼︰
1.服用前請記住備份,〝版面配置〞-〝修改HTML〞-〝下載完整範本〞。
2.程式碼置入教學︰請記得勾選〝展開小裝置範本〞

PS. 若只是想要靜態的 favicon 圖檔,只需加入第一行程式碼;
想要顯示動態 favicon 圖檔才需要兩行程式碼都加入,但~動態的 favicon 圖示目前好像只有 Firefox Browser 有支援。

主要要加入的程式碼是這兩行
<link href='靜態的ico圖檔連結' rel='shortcut icon'/>
<link href='動態的gif圖檔連結' rel='icon' type='image/gif'/>

若以剛剛阿啦上傳的圖檔為例的話,就變成
<link href='http://sites.google.com/site/lasjargon/blogger-photo/favicon.ico' rel='shortcut icon'/>
<link href='http://sites.google.com/site/lasjargon/blogger-photo/favicon.gif' rel='icon' type='image/gif'/>

將這兩段語法加入至
<b:include data='blog' name='all-head-content'/>之後,
</head>之前,

像下圖所示…
favicon-008

以上,祝修改愉快!

1 則留言:

【回覆須知】
✔ 請注意網路禮儀,禁止口出惡言、廣告張貼。
✔ 可用語法請參考這篇
✔ 與本文無關的留言請利用右側的「留言板」,反之請盡量留言在相關主題。
✔ OpenID留言,填入自己的網站、部落格網址即可。
✔ 圖片消失、檔案連結錯誤 / 更新,歡迎留言告知。
✔ 其他問題、想法,也歡迎留言說說....☺。