網頁圖示的製作方式

之前在馬老師舊的部落格就有教導過網站圖示的製作方式，不過因為部落格搬新家，也再把這個教學重新講解與製作一遍，如下圖所示，許許多多的網頁都有製作網頁圖示。

這樣的圖示我們可以利用任何的美工軟體來設計，而我是在Fireworks中製作（個人覺得比較方便），首先開一個正方形的透明圖檔（寬、高相同），大小可以自訂，底色設為透明。

底色透明的部分是希望可以製作一個去背的網站圖示，像上面範例奇摩的圖示就有去背，維基百科則沒有，接下來就看你怎麼樣設計這個圖示囉～

製作完成後儲存成png的格式，進入這個網站將我們的PNG圖檔轉換成ICO圖檔，進入後按下選擇檔案，找到我們剛剛所儲存的PNG圖檔，接下來就按下轉換的按鈕。

待轉換完成後在Click here to Download的文字上面按右鍵選擇另存目標。

接下來在想出現此圖示的網頁上，輸入以下的HTML程式碼。

<link href="favicon.ico" rel="shortcut icon" />

其中href代表這個圖檔的名稱和路徑，如果是整個網站的所有頁面都要有本圖示的話，那每一頁都必須要有這段語法喔！接下來預覽網頁就可以看到你所設計的網頁圖示了。

註：在網頁還沒上傳的情形之下I.E.會看不到這個圖示，大家可以用Chrome或Firefox來預覽