如何讓部落格、網站有favicon小圖示？(免軟體，線上工具)

作者: 香腸 | 日期: 2009-02-09 | 分類: 好站推薦, 教學文章

※請注意，本站文章未經授權，嚴禁轉載！謝謝。

一個網站最具代表性的東西就是網站LOGO、網站名稱、網站網址，不過總感覺好像忽略了什麼東西？就像麻將三缺一的樣，少一個就是玩不起來。沒錯！我們少的就是網站的favicon小圖標了，如果你網站被人家加入書籤後，你就會體會到圖標的重要性，因為在一大堆雜亂的書籤中，favicon越特別，別人的目光就會往那飄！

要製作favicon其實並不難，因為在這Web2.0的時代中，有許許多多軟體工具都被搬到線上了，我們只要滑鼠點一點，自己的favicon就製作出來囉！那到底是哪個網站這麼方便，只要我們點一點自己的favicon就出來了呢？

網路上有個方便的網站叫做「favicon.ico Generator」。這網站可讓大家在線上輕鬆製作個人的favicon圖示，免裝軟體，輕鬆點幾下就完成了，而且還可以製作動畫版的favicon圖像喔！

favicon-1
網站名稱：favicon.ico Generator
網站網址：http://www.favicon.cc/

教學章節

一、製做簡單的favicon
二、製作動畫版的favicon
三、上傳一般圖片轉favicon

一、 製做簡單的favicon

第1步 首先到favicon.cc網站，進入後請點擊左方的﹝Create New Favicon﹞，接著在右手邊你可以挑選顏色，然後在中間區塊你可以畫上你想要的圖示，如果畫錯了可以勾選右手邊下方的「transparent」，然後把畫錯的部分「點」掉！而中間正下方有個「Preview」正是可以讓你即時預覽的favicon圖像喔！

favicon-2

第2步 當你的favicon圖像完成之後，請把網頁網下拉，在「Preview」區塊下有一個﹝Download Favicon﹞的按鈕，請點擊它就可以下載你的圖示囉！下載完後，通常就是把你的favicon命名為「favicon.ico」上傳到網站根目錄即可使用。

favicon

二、製作動畫版的favicon

第1步 首先到favicon.cc網站，進入後請點擊左方的﹝Create New Favicon﹞。接著在右手邊你可以挑選顏色，然後在中間區塊你可以畫上你想要的圖示，如果畫錯了可以勾選右手邊下方的「transparent」，然後把畫錯的部分「點」掉！而中間正下方有個「Preview」正是可以讓你即時預覽的favicon圖像喔！

這時要注意一下了，要製作動畫版的Favicon的使用者，因為動畫是指很多張圖片疊在一起所產生的效果，因此當你畫完第一張Favicon時，請不要直接點擊下方的下載按鈕，請點擊Favicon下的【Use Animation】。

favicon-2

第2步 當按下【Use Animation】鈕後，下方會滑出其他按鈕，請點擊﹝Append New﹞新增新的底圖，然後就按照第1步的操作方式，畫上你的圖，如果有很多張就再繼續點﹝Append New﹞新增其它底圖。

在「Frame」部分，可以設定展示速度，在【loop forever】部分可以設定動畫次數，預設的【loop forever】是無窮迴圈，無限次數展示。在「Preview」區域一樣可以即時預覽。

favicon-3

第3步 當一切調整好後，就點﹝Download Favicon﹞下載你的favicon圖示囉！下載完後，通常就是把你的favicon命名為「favicon.ico」上傳到網站根目錄即可使用。

favicon-5

教學章節

一、製做簡單的favicon
二、製作動畫版的favicon
三、上傳一般圖片轉favicon

1 2

標籤: , , , ,

相關文章



關於本文章有 17 則留言。

  1. wp新手
    2009-02-09 @ 23:51:21 
    1

    這個小圖示教學，我昨天有在其他網站看到一篇。不過香腸大寫得更詳細就是XD。

    其實我會找到另一篇教學，正是看了香腸大的[超省錢架站法]，這幾天開始嘗試自己架blog，才會在網路找相關資源。網站基本的都差不多安裝完成了。但是現在遇到一個問題，當我在wp後台設定佈景的邊欄模組(也就是rss等插件)時，設定好了按下[儲存變更]時，網頁卻出現[server not found]，我一看上面的網址列，居然變成[http://wp-admin/widgets.php?message=updated]，我想至少應該是[http://www.我的網域/wp-admin/widgets.php?message=updated]吧?不然怎麼寫入?
    我試了很多次，都是同樣的結果，現在就卡在這裡了。想請香腸大幫我解惑一下，感激不盡！(我用的是wp2.7版+中文化，從官網直接下載的。而widgets.php這個檔案，我在安裝上傳時也不會動到啊?)

    香腸回應：
    關於您的問題，可能需要附上一下圖片，到論壇討論吧： http://sofree.tw
    有勞您在論壇再貼一次問題~

  2. 游阿貓
    2009-02-10 @ 00:16:10 
    2

    我弄好了，搞了一個看不懂的東西!
    等我找到適合的再來換!! 噗噗 (那4SY的圖要怎麼做阿? 香腸+天才+貓 ?)

    TO 1樓 WP新手 :
    您可以移駕到論壇喔! http://sofree.tw/
    那邊有很多資源低!

    香腸回應：
    4SY= 貓+腸+竹竿

  3. 梓
    2009-02-10 @ 00:20:49 
    3

    喔喔！
    香腸～！

    我發現。。

    圖的浮水印ＬＯＧＯ還是舊網址XDDD！！（重點錯誤）
    有沒有獎品？（轉ˇ）

    （啊啊！不要打臉（...

    香腸回應：
    沒有獎品喔...因為這篇文章好幾天前就寫好了XD
    接下來還會有一兩篇是舊的浮水印...
    (迷:誰說舊得不能用？ ((翻桌 )

  4. sky37042
    2009-02-10 @ 11:39:40 
    4

    老東西囉～
    之前有看過

    大小不一定要使用 16*16
    一般來說
    比較常見的是 32*32 和 64*64
    可是做太大...
    就會變成很多東西擠在一團
    所以建議是 32*32

    香腸回應：
    這東西好像有點久了...不過一樣是.cc的，當然要來介紹一下~
    因為太多人都敲MSN問我，直接寫一篇比較快XD

  5. kibitzer
    2009-02-10 @ 20:15:08 
    5

    我都有照著做，把圖放在網站根目錄，圖還是沒有出現?
    有什麼地方還要設定嗎?

    香腸回應：
    我已經有看到了~關閉瀏覽器重開看看吧
    圖： http://pix.gogobox.com.tw/show.php?img=83332_qq.png.html

  6. Elvis
    2009-02-10 @ 20:44:30 
    6

    好工具^^推

    香腸回應：
    謝謝月光喘~

  7. kibitzer
    2009-02-10 @ 20:51:05 
    7

    我剛才用另外一台電腦也可以了。但是，書桌這一台重開機都不行，
    這跟我上次的大頭貼一樣，明明已經換圖了，書桌這一台就是沒有換，
    其他所有的電腦都換了。可是過了二、三天後，它又換成新的大頭貼了。
    這是不是書桌這台電腦有被什麼程式擋到(像防毒之類的)?

    香腸回應：
    應該不是，清除一下電腦瀏覽器的快取看看~

  8. 阿凎
    2009-02-10 @ 21:07:02 
    8

    咦 話說 香腸 你網站好像一直沒有圖示喔 :roll:
    要不要弄根香腸或者一包鱈魚香絲當圖案 :mrgreen:

    香腸回應：
    我有圖示阿...你的瀏覽器有問題吧~

  9. 阿凎
    2009-02-10 @ 23:17:19 
    9

    阿咧 圖示 有跑出來了 吼 你剛剛偷藏起來喔 :evil:

    哈哈哈哈 .....

    香腸回應：
    .....

  10. kibitzer
    2009-02-11 @ 07:17:22 
    10

    快取?ie是在工具/網際網路選項/一般/瀏覽歷程記錄，這裡都要刪掉嗎?

    香腸回應：
    對，我是指清除瀏覽器的暫存檔。

  11. kibitzer
    2009-02-11 @ 07:41:55 
    11

    部落格我有裝1 blog cacher的外掛。我剛才去清理了一下，好像沒有用?

    香腸回應：
    我看是有阿~~
    只是你的網站跑很慢，我跑差不多快一分鐘網站才全部開啟好耶~~

  12. kibitzer
    2009-02-11 @ 09:28:13 
    12

    一分鐘？我在外面健身房跑網站也沒有這麼久？是不是這個1 blog cacher外掛要重新設定?

    香腸回應：
    有可能~

  13. kibitzer
    2009-02-11 @ 09:37:37 
    13

    我已經刪掉1 blog cacher快取的檔案了，請再試一下，速度是否改進?
    速度跟網站放在免費空間有沒有關係?

    香腸回應：
    網站的空間或是部落格邊欄掛的東西，都會影響整體速度。
    目前速度是有快些了~
    有其它問題請到論壇討論吧 :P
    http://sofree.tw

  14. kibitzer
    2009-02-11 @ 10:44:06 
    14

    favicom可以顯示了 :smile: 謝謝!

    香腸回應：
    :)

  15. 憨猴
    2009-03-17 @ 23:34:01 
    15

    製成動畫版的favicom似乎沒有動畫的效果耶~
    但是在favicom製作的preview是會動的說 :cry:

    香腸回應：
    當時我測試OK哩~

  16. 小窩
    2009-05-21 @ 17:24:48 
    16

    動畫的不能用欸

    還有圖示

    動畫用完上傳到網站根目錄 哪理阿 找不到欸

    香腸回應：
    網站根目錄，就是FTP中的public_html下。
    如果你的網站不是自己架設，就傳到其它地方，然後用語法引出來。

  17. ★美
    2009-08-15 @ 00:23:03 
    17

    想請問香腸大，我有傳到ftp的public_html之下了
    需要在哪邊打什麼語法嗎? 因為我看到有的blog是說
    還要在header裡頭打上一段語法...

    我的icon就是跑不出來，真的很奇怪說。
    不知道是哪個步驟出了錯。請問香腸大需要打什麼語法嗎?!

    香腸回應：
    如果不行，請參考： http://sofree.tw/thread-1783-1-1.html