就像是圖中所展示的,網址列的最前端及書籤圖示,指的就是Favicon,站長教你,輕輕鬆鬆幾個步驟就製作完成囉。

ico01

為什麼要製作Favicon?

當然是為了讓人對你的站台加深印象囉!比如說像是香腸炒魷魚他們的Favicon就是一根香腸加一支魷魚,讓人很容易就聯想起來了!諸如此類,所以這也是一個加深別人對你站台的印象哦,當別人加了一堆網址書籤後,如果你的Favicon很特別,那麼別人很容易馬上就能找到你的網址,不是嗎?

如何製作Favicon?

站長在這邊介紹一個快速製作Favicon的網站:http://www.favicon.cc/

這個網站可以將你想製作成Favicon的圖片,快速轉換成Favicon,或者是利用他的編輯介面自行畫製Favicon製作時,下方還有一個即時預覽圖,可以讓你馬上知道做出來的效果哦!站長先介紹上一下每個欄位的功能。

從左欄開始:

Create New Favicon:製作新的Favicon

Import Image:匯入現有圖片製作

Latest Favicons:最新被製作的Favicon

Top Rated Favicons:熱門Favicon

Login:登入,如果你有註冊的話

Register:註冊(不需註冊即可使用全部的功能)

Search:可用搜尋列打入關鍵字,搜尋相關的Favicon

中間的16x16編輯欄,對應著下面的即時預覽圖

右邊的工具列:

即點即選的色彩選擇框

transparent:橡皮擦

pick existing color:透明化

move:可以將整個Favicon移動成你想要的位子

製作完畢後再按下面的【Download Favicon】即可輸出Favicon.ico檔案囉,聰明的你,想必不用太多說你很快就可以得心應手囉!!

如何在網址列加上Favicon.ico?

將你做好的Favicon.ico上傳到你放圖片的空間或是部落格空間都可以,例如站長的是放置在

http://image.steachs.com/favicon.ico

至你的wordpress佈景資料夾中下載index.php檔案回來,打開index.php

加入以下語法於最上方(記得將網址換成你的icon位址哦)

<link href='http://image.steachs.com/favicon.ico' rel='shortcut icon'/>

儲存檔案後,再上傳覆蓋即可。或是利用後台編輯亦可

後台中至外觀→編輯→選擇index.php

然後在上方加入語法再儲存即可

然後再到部落格看看,加到我的最愛再看,如此一來你的網址列前方就有專屬你網站的Favicon

日期:2009/02/03 | 瀏覽 851 次 | 留言:4 個 | 作者:scorpio
分類:線上工具/服務
標籤:, ,
本站採用CC授權不歡迎全文轉載,如需轉載(部份)、引用文章,請務必附上作者及來源處。
訂閱『就是教不落』的RSS

4 個留言

  1. anita 說道:

    請問使用後,如要改別的圖,要如何做呢?
    因為我試著改成別的圖檔,但它網址上只會顯示第一次存的圖.

    版主回應:

                換了一個圖示後,按Ctrl+F5重新整理哦,不要只按F5

  2. sky37042 說道:

    不加語法會直接套用整個網站
    但是檔名一定要是favicon.ico

    若用語法
    則是可以不用favicon.ico檔名
    而且 還可以用 GIF 做成動畫....
    ((單然不建議... 有機率會失敗

    版主回應:

                原來直接丟進去會,套用全部QQ

  3. Mick 說道:

    上面打錯字 抱歉 幫改一下

    對了

    你網頁右邊Google Friends Connect 那個有中文版了!~

    香腸那邊有新文章!!~ 參考一下巴~!!

    版主回應:

                幫你改了,我今天在公司的時候是中文了說,回家又變英文XD

  4. Mick 說道:

    其實不用耶

    把圖檔另存成 favicon.ico

    然後放在WP的根目錄就好了

    我這樣放他就自動讀取囉!!~ 不用改語法

    版主回應:

                加入語法的話為了其它的blog程式也通用啦!呵呵,感謝你告知此方法

發表留言 »





網站資訊


Creative Commons License Google PageRank查詢
Copyright 2009 就是教不落 | Theme Sco v2.0 By:Scorpio