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

favicon-16
什麼是Favicon?用最簡單的話來說,就是指那個出現在瀏覽器「網址列」開頭出現在瀏覽器「書籤/我的最愛」裡收藏的網站項目前的那個「小圖示」,如果你仔細看,就會發現其實有很多網站都擁有它們專屬的圖示,這讓訪客可以更容易的一眼就辨認出想去的網站,讓網站顯得更有個性。

而以部落格來說,使用WordPress等工具獨立架站、擁有自己空間的部落格當然可以輕鬆加上自己的網站專屬圖示,但如果你是依附在「部落格平台服務」下,那你就會發現Favicon顯示的是平台服務的圖標(例如所有無名小站部落格顯示的都是一個綠色的「無」);只有極少數的平台服務開放用戶去編輯HTML版面,並讓用戶可以透過修改HTML,來連結使用自己的Favicon,例如電腦玩物所依附的Blogger平台。

但是昨天忽然發現電腦玩物的Favicon失效了,不管用哪種瀏覽器來看都只有顯示出Blogger原始的官方橘色圖標,我原本以為是自己圖檔上傳空間的問題,但是做了修改後還是無法顯示圖檔,於是無計可施之下,隨意調動了一下Favicon程式碼的位置,居然發現部落格專屬圖示又跑出來了。


Blogger設定好的Favicon顯示不出來?

專業的解釋我寫不出來,不過總之結果就是:如果你已經是Blogger用戶,你也早就自己設定好Favicon,但是原本顯示得好好的,現在卻顯示不出來的話,那麼你只要把Favicon的程式碼調動到下面這段程式碼後面,以及</head>之前的某個位置上即可(最好直接放在</head>之前)
<b:include data='blog' name='all-head-content'/>
不要問我為什麼,因為這只是我實際測試出來的結果而已^^。
不過我想應該也有一些Blogger用戶還沒有自己設定過Favicon,有時候也有一些訪客來詢問我怎麼讓網址列可以出現自己部落格的專屬圖示。所以我想我也趁著這個機會,從頭介紹一遍電腦玩物專屬Favicon的製作流程

一格一格刻出自己的專屬圖標:

Favicon通常是使用「16X16」大小的圖示,格式為「ico」(Firefox等瀏覽器則另外支援gif、png的顯示)。為了要在這麼小的圖案中要讓訪客看清楚你想表達的內容,所以通常Favicon的圖案都是很簡潔單純的,你常常會看到的是使用網站具有代表性的字或字母。

而「Favicon.cc」這個網站,就是提供了一個16格乘以16格的編輯區塊,讓你自己選擇顏色,一格格的把想要的圖案刻出來。它的下方也提供了一個即時預覽的模擬畫面,讓你隨時可以知道目前圖案在瀏覽器網址列看起來會是什麼樣子。

favicon-01

點選16X16方格下方的「Use Animation」,可以設計動畫圖標。使用「Append New Frame」來新增一張圖示,你可以新增2張、3張到任何你想要的數量,然後就像畫動態卡通一樣,透過輪播這些不同圖片產生動畫效果的圖示檔。

這種方法可以設計出很多變化,但有點麻煩,電腦玩物網址上的靜態圖示雖然是使用Favicon.cc設計的,不過動態圖示則是用下面介紹的另外一個網站直接製作(什麼!你說你看不到電腦玩物的動態圖示?那就換成Firefox核心的瀏覽器看看吧^^)。
favicon-03

在Favicon.cc你可以不需要註冊、登入,就能使用所有的圖標設計功能,最後按下網頁下方的「Download Favicon」就可以把圖示(favicon.ico)下載回來囉!
favicon-02

簡單兩步驟製作動畫圖示:

FavIcom from Pics」則不是讓你自己設計圖標,而是幫你把已經存在的圖片變成icon圖示,你不僅不需要註冊登入,甚至只需要一個上傳的步驟即可。

進入網站後,你可以在中間看到一個上傳來源圖檔(Source Image)的欄位,按下﹝瀏覽﹞從本機硬碟中加入一張圖片,可以是各種大小格式的相片圖檔(jpg、png等等),然後按下〔Generate Favicom.ico〕,網站就會把圖片轉檔成適合當作Favicon的大小(16X16)與格式(*.ico)

或者你想製作動態的Favicon,那麼就記得先勾選「Animate Favicon」即可。
favicon-04

等待一小段時間,Favicon就會製作完成了。這時候你可以按下〔Download Favicon〕來下載製作好的Favicon圖檔
favicon-05

下載後的檔案是個壓縮檔,解壓縮後,你可以在目錄裡面找到一個靜態Favicon(*.ico),和一個動態的Favicon(*.gif)

這個網站所製作的動態圖示都是單一畫面上下捲動的模式,雖然很單調,但因為操作很簡單,又能達到動態的效果,所以也是頗值得一試。
favicon-06

將圖示檔案上傳到可外連空間:

透過前面兩個服務,我們已經製作出了符合規格的Favicon圖檔(16X16的ico和gif),而如果你想在Blogger使用它,就必須先將圖檔上傳到一個可以外連的空間(可外連,才能讓你把圖檔連到自己的部落格使用),當然,這個空間必須支援外連時顯示ico和gif,而且提供的外連網址結尾也是ico、gif檔案名稱。

符合這些要求的「免費」空間服務裡,微軟的「SkyDrive」是很值得推薦的一個選擇。來到SkyDrive,按下﹝開始使用﹞。
favicon-07

申請註冊一個新的空間帳戶,或者使用你的MSN帳號直接登入,你就可以擁有5GB的免費網路空間
favicon-08

進入你的個人SkyDrive頁面後,你會在下方看到一個「公開資料夾」,表示放在這裡面的圖檔都是可以公開被其他人連結看到的。你可以在這個公開資料夾底下建立一個新的資料夾來專門存放部落格需要的圖檔。
favicon-09

進入其中一個公開的資料夾中,選擇上方工具列的「新增檔案」來上傳你的Favicon圖檔,我這邊分別上傳了剛剛製作的靜態ico檔案,和動態gif檔案。
favicon-10

上傳好需要的圖檔後,如何在SkyDrive裡面獲得可以外連的圖片網址呢?首先點擊某個圖檔,接著點擊上方工具列的「開啟」
favicon-11

這時候就可以獲得該圖檔的獨立顯示網址,例如:「http://....livefilestore.com/........./favicon.ico」。把這段網址先複製下來,等等要設定到Blogger的後台中。
favicon-12

在Blogger後台設定Favicon:

前面我們已經完成了圖檔設計、圖檔上傳,並且獲得了圖檔的連結位置,那麼接下來我們就是要把Favicon的圖檔連結加入到部落格後台中,讓你的部落格開啟時能夠被瀏覽器偵測到Favicon。

以Blogger為例,進入〔版面配置〕-〔修改HTML〕,我們可以在這裡自訂版面內容,包括加入Favicon的連結。不過在進行任何HTML的修改前,記得先「下載完整範本」,把你目前的範本備份下來,以後修改時不小心發生錯誤,才可以透過重新上傳來還原。
favicon-13

接著就是最後的步驟了,我們必須把Favicon的圖檔連結加入HTML當中,加入的語法如下
<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon' type='image/x-icon'/ >
<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>
以電腦玩物使用的Favicon為例,就會寫成這樣:
<link href='http://ki6xfa.blu.livefilestore.com/y1pCUPmfVpzKvuusmZL6f-oxV17ai-K-HGGBZ2oT0MdQPpgbW_RAgpgcUb9k8WmOvec139CAyYAwn8/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://ki6xfa.blu.livefilestore.com/y1pwcZjamU1G8HTc1oGGnssEoPE0mA0WOMl1OOhsVR2xZDRqWg6mvzLsHoK6dvWuBAIAOmo0xA_Ch8/favicon.gif' rel='icon' type='image/gif'/>
把上面兩段語法加入到HTML範本內容裡的<b:include data='blog' name='all-head-content'/>之後,</head>之前(最好直接放在</head>之前)。

附註:原本是加在範本內容的<head>和</head>之間就可以,但是從昨天開始(2008/10/23)在Blogger中如果favicon程式碼跑到<b:include data='blog' name='all-head-content'/>之前,在瀏覽器中就顯示不出你的Favicon。
favicon-15

讓我們進一步解釋兩段語法的功能:
<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon' type='image/x-icon'/>
<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>
假設你只想要使用靜態的ico圖檔,那麼只要加入第一行<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon'/>這段程式碼就可以了,這樣你的部落格在所有的瀏覽器中都可以顯示出Faviocn。記得圖示檔案的格式必須是「ico」,這樣使用IE的用戶才能看到你網站的圖示。

而如果你想使用動態的gif圖標,那麼就還要再多增加第二行<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>這段程式碼,這樣Firefox瀏覽器就能讀取到Gif動態檔案,能夠在網址列、書籤當中看到動態的圖示,不過並非所有瀏覽器都支援顯示Gif檔的Favicon,所以記得先添加第一行的程式碼。

完成上述動作後,儲存你修改過的範本,重新開啟瀏覽器來讀取你的部落格,就可以看到網址列、書籤上出現網站的專屬圖示囉!

留言

  1. 終於復原了
    真是感謝大大
    b:include data='blog' name='all-head-content'/>
    話說這是什麼
    原本沒有嗎?

    回覆刪除
  2. 哈哈,啊不是說不要問我嗎XD

    不過歡迎知道真正原因的朋友回答喔^^

    回覆刪除
  3. https://addons.mozilla.org/en-US/firefox/addon/6988

    回覆刪除
  4. http://Angus-syu.spaces.live.com/

    歡迎撥冗關覽、留言與闡揚!

    回覆刪除
  5. http://blog.soft.idv.tw/?p=394

    回覆刪除
  6. 請問一下要怎麼讓我做的動畫態圖示一直動呢?

    我的圖示只動一輪就停在最後一個字了…有什麼辦法可以讓他一下重複?

    http://twins221.blogspot.com/

    回覆刪除
  7. 用Faviocn.cc製作圖標時,
    選擇持續播放的動畫效果

    回覆刪除
  8. 感謝大大分享,受教了!

    http://navalley.blogspot.com/

    回覆刪除
  9. 請問一下我使用後,只有首頁看的到圖示,進入文章或別的頁面後又變回橘色大B,不知道問題在哪...

    回覆刪除
  10. 建議把icon語法直接放在 /head 之前

    另外會不會是你的Blogger hack或版型有影響?

    回覆刪除
  11. 我也不太清楚,我在測試看看囉,感謝解答

    回覆刪除
  12. 你好 我按照你的方法
    在FF上顯示OK
    但IE上就不行了耶
    (但是電腦玩物在IE上也是正常顯示)

    還要什麼設定嗎

    回覆刪除
  13. 因為在 <b:include data='blog' name='all-head-content'/> 裡包含 Blogger 預設的圖示,如果你的圖示設定放在此標籤前面,就會被預設值蓋掉囉…
    所以放在 </head> 前面是最保險的做法。

    回覆刪除
  14. 請問一下 要如何把 blogger share 上 facebook 啊 ?

    回覆刪除
  15. 在下按照足下的方式設定,在IE和FF上顯示得出來,但在Chrome上就回復預設圖標了。而敝人看見閣下的圖標於Chrome上仍健在,可否傳授箇中密技呢?讓陛下百忙抽空、猥自枉屈,特先道歉。

    回覆刪除
  16. 我的設定方法就和我文章裡面寫的一樣阿^^

    回覆刪除
  17. 您好,我跟22樓有一樣的問題,真的不知道除了favicon語法之外是否還有其它地方造成它無法顯示,真苦惱><

    回覆刪除
  18. 異塵行者你好:
    之前我依照你的方式貼入語法
    但是只有在 IE 會成功顯示
    在 Google 瀏覽器會不成功
    後來我參考其他文章後
    發現要將這個語法貼在不同的地方
    就會成功

    我有自己寫了一篇說明
    希望可以提供給你還有其他跟我有同樣問題的人參考
    謝謝!
    http://chiuchaorong-note.blogspot.com/2010/02/blogger.html

    回覆刪除
  19. 更正連結
    http://chiuchaorong-tech.blogspot.com/2010/02/blogger.html

    回覆刪除
  20. 感謝您的回饋

    我之前也已經有在文章裡註明,
    最好直接就放在最後的 /head 之前即可

    回覆刪除
  21. 感謝,修改好囉!果然這是一個長知識的地方~

    回覆刪除
  22. 感謝異塵大!我照著步驟完成了^^
    而且我發現一個線上的Base64轉換器,可以將小圖片編碼成純文字嵌入Blog 的HTML ,進而加速網頁載入時間!
    語法大致相同,只需將免空連結替換成圖檔編碼即可,如下:

    <(留言不准有標籤)link href="data:image/x-icon;base64,{favicon的Base64編碼}" rel="icon" type="image/x-icon" />

    Base64 online encoder/decoder :
    http://www.motobit.com/util/base64-decoder-encoder.asp

    回覆刪除
  23. 今天Blogspot祭出後台直接設定啦XD

    回覆刪除
  24. 是的,我昨天有寫一篇新文章介紹

    http://playpcesor.blogspot.com/2011/06/google-blogger-27favicon.html

    回覆刪除
  25. skydrive是不是更新了變得好奇怪@@?
    不知道要怎麼取得檔案網址了....

    回覆刪除
  26. 我要貼入的程式碼:
    link href='https://skydrive.live.com/#!/?qt=mru!cid=5E23A99072D356B6&id=5E23A99072D356B6%21232/favicon.ico' rel='shortcut icon' type='image/x-icon'/ >
    但blogger一直出現下面的訊息,所以一直無法存檔耶...
    剖析 XML 時發生錯誤 (第 667 行,第 73 欄):The reference to entity "id" must end with the ';' delimiter.

    回覆刪除
  27. 顯示不出小圖的狀況,找原因找了好久,終於設定成功了,謝謝你的詳細教學~~

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

Google Maps 我的地圖完全教學!規劃自助旅行攻略

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Slack 完整教學與上手心得:找到正確的團隊溝通之道

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Google 表單自動關閉回覆教學:時間人數到達就過期

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

Draw.io 中文線上製作流程圖首選!專業水準完全免費