一個網站最具代表性的東西就是網站LOGO、網站名稱、網站網址，不過總感覺好像忽略了什麼東西？就像麻將三缺一的樣，少一個就是玩不起來。沒錯！我們少的就是網站的favicon小圖標了，如果你網站被人家加入書籤後，你就會體會到圖標的重要性，因為在一大堆雜亂的書籤中，favicon越特別，別人的目光就會往那飄！
要製作favicon其實並不難，因為在這Web2.0的時代中，有許許多多軟體工具都被搬到線上了，我們只要滑鼠點一點，自己的favicon就製作出來囉！那到底是哪個網站這麼方便，只要我們點一點自己的favicon就出來了呢？
網路上有個方便的網站叫做「favicon.ico Generator」。這網站可讓大家在線上輕鬆製作個人的favicon圖示，免裝軟體，輕鬆點幾下就完成了，而且還可以製作動畫版的favicon圖像喔！
網站名稱：favicon.ico Generator
網站網址：http://www.favicon.cc/
教學章節
一、 製做簡單的favicon
第1步 首先到favicon.cc網站，進入後請點擊左方的﹝Create New Favicon﹞，接著在右手邊你可以挑選顏色，然後在中間區塊你可以畫上你想要的圖示，如果畫錯了可以勾選右手邊下方的「transparent」，然後把畫錯的部分「點」掉！而中間正下方有個「Preview」正是可以讓你即時預覽的favicon圖像喔！
第2步 當你的favicon圖像完成之後，請把網頁網下拉，在「Preview」區塊下有一個﹝Download Favicon﹞的按鈕，請點擊它就可以下載你的圖示囉！下載完後，通常就是把你的favicon命名為「favicon.ico」上傳到網站根目錄即可使用。
二、製作動畫版的favicon
第1步 首先到favicon.cc網站，進入後請點擊左方的﹝Create New Favicon﹞。接著在右手邊你可以挑選顏色，然後在中間區塊你可以畫上你想要的圖示，如果畫錯了可以勾選右手邊下方的「transparent」，然後把畫錯的部分「點」掉！而中間正下方有個「Preview」正是可以讓你即時預覽的favicon圖像喔！
這時要注意一下了，要製作動畫版的Favicon的使用者，因為動畫是指很多張圖片疊在一起所產生的效果，因此當你畫完第一張Favicon時，請不要直接點擊下方的下載按鈕，請點擊Favicon下的【Use Animation】。
第2步 當按下【Use Animation】鈕後，下方會滑出其他按鈕，請點擊﹝Append New﹞新增新的底圖，然後就按照第1步的操作方式，畫上你的圖，如果有很多張就再繼續點﹝Append New﹞新增其它底圖。
在「Frame」部分，可以設定展示速度，在【loop forever】部分可以設定動畫次數，預設的【loop forever】是無窮迴圈，無限次數展示。在「Preview」區域一樣可以即時預覽。
第3步 當一切調整好後，就點﹝Download Favicon﹞下載你的favicon圖示囉！下載完後，通常就是把你的favicon命名為「favicon.ico」上傳到網站根目錄即可使用。
教學章節
一、製做簡單的favicon
二、製作動畫版的favicon
三、上傳一般圖片轉favicon
![[教學]如何申請台北捷運誤點證明？](https://i1.wp.com/sofree.cc/wp-content/uploads/2024/04/20240403164113_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何申請台北捷運誤點證明？")
![[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？](https://i1.wp.com/sofree.cc/wp-content/uploads/2023/11/20231103232630_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？")
![[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告](https://i0.wp.com/sofree.cc/wp-content/uploads/2023/06/20230620130326_57.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告")
![[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？](https://i2.wp.com/sofree.cc/wp-content/uploads/2024/04/20240402230128_0.png?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？")
![[教學]如何申請台北捷運誤點證明？](https://i0.wp.com/sofree.cc/wp-content/uploads/2024/04/20240403164113_0.jpg?fit=768%2C403&quality=99&ssl=1 "[教學]如何申請台北捷運誤點證明？")
想請問香腸大，我有傳到ftp的public_html之下了
需要在哪邊打什麼語法嗎? 因為我看到有的blog是說
還要在header裡頭打上一段語法…
我的icon就是跑不出來，真的很奇怪說。
不知道是哪個步驟出了錯。請問香腸大需要打什麼語法嗎?!
動畫的不能用欸
還有圖示
動畫用完上傳到網站根目錄 哪理阿 找不到欸
製成動畫版的favicom似乎沒有動畫的效果耶~
但是在favicom製作的preview是會動的說 :cry:
favicom可以顯示了 :smile: 謝謝!
我已經刪掉1 blog cacher快取的檔案了，請再試一下，速度是否改進?
速度跟網站放在免費空間有沒有關係?
一分鐘？我在外面健身房跑網站也沒有這麼久？是不是這個1 blog cacher外掛要重新設定?
部落格我有裝1 blog cacher的外掛。我剛才去清理了一下，好像沒有用?
快取?ie是在工具/網際網路選項/一般/瀏覽歷程記錄，這裡都要刪掉嗎?
阿咧 圖示 有跑出來了 吼 你剛剛偷藏起來喔 :evil:
哈哈哈哈 …..
咦 話說 香腸 你網站好像一直沒有圖示喔 :roll:
要不要弄根香腸或者一包鱈魚香絲當圖案 :mrgreen:
我剛才用另外一台電腦也可以了。但是，書桌這一台重開機都不行，
這跟我上次的大頭貼一樣，明明已經換圖了，書桌這一台就是沒有換，
其他所有的電腦都換了。可是過了二、三天後，它又換成新的大頭貼了。
這是不是書桌這台電腦有被什麼程式擋到(像防毒之類的)?
好工具^^推
我都有照著做，把圖放在網站根目錄，圖還是沒有出現?
有什麼地方還要設定嗎?
老東西囉～
之前有看過
大小不一定要使用 16*16
一般來說
比較常見的是 32*32 和 64*64
可是做太大…
就會變成很多東西擠在一團
所以建議是 32*32
喔喔！
香腸～！
我發現。。
圖的浮水印ＬＯＧＯ還是舊網址XDDD！！（重點錯誤）
有沒有獎品？（轉ˇ）
（啊啊！不要打臉（…
我弄好了，搞了一個看不懂的東西!
等我找到適合的再來換!! 噗噗 (那4SY的圖要怎麼做阿? 香腸+天才+貓 ?)
TO 1樓 WP新手 :
您可以移駕到論壇喔! http://sofree.tw/
那邊有很多資源低!
這個小圖示教學，我昨天有在其他網站看到一篇。不過香腸大寫得更詳細就是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這個檔案，我在安裝上傳時也不會動到啊?)