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

一個網站最具代表性的東西就是網站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