為網站製作圖示：Favicon

entry.

您是否也想要代表自己網站的圖示？讓自己的網站連圖示都有自己的風格？

網站圖示，又稱網站圖標，是當瀏覽者儲存網頁到書籤或我的最愛時，名稱前所顯示的圖示，也因此英文名為「Favorite Icon」簡稱「Favicon」。本教學將教您製作屬於自己的網站圖示，讓網頁瀏覽者能以圖示來記憶和辨識您的網站。

首先，在製作 Favicon 前，您必須知道自己能不能上傳圖片到網站，任何地方都可以，並要支援上傳 ICO 格式（較新的瀏覽器也會支援 GIF 和 PNG 格式）。另外，您要有可以修改內容的權力，才能成功植入 Favicon 的程式碼。製作和設定 Favicon 其實非常簡單，但要製作漂亮的 Favicon 卻需要點技巧…

1. 製作 Favicon 圖檔

首先，您必須要決定自己的 Favicon 的樣子。您可以用 Photoshop 或任何支援 ICO 檔的影像處理器，也可用網上的免費工具。以下為幾個網上的免費 Favicon 服務：

favicon.cc - 上傳（利用 import 功能）來轉檔為 16 x 16 Favicon，並提供 JavaScript 繪圖介面讓使用者修改，或製作一個全新圖示。最方便的功能是即時預覽，在修改圖示的過程，分頁的圖示和預覽圖示框也會隨之更新。此為豺狼最推薦的製作網站！
Graphics Guru - 上傳或用網上圖片來轉檔為 16 x 16 Favicon。
Favicon Generator - 僅能上傳或圖片來轉檔為 16 x 16 Favicon。
FavIcon from Pics - 僅能上傳或圖片來轉檔為 16 x 16 Favicon，並且會將動態與靜態格式壓縮並提供下載。

Favicon 的大小為 16x16 像素，要製作美觀的圖示有一些小訣竅：

多利用透明背景 - 除非您的圖示非要方形不可，建議使用透明背景來讓圖示融入瀏覽器的介面顏色。這樣當圖示顯示在瀏覽器的書籤或我的最愛，甚至在分頁上方時，都不會有明顯的邊框而顯得突兀。
顏色限制在四色內 - 這是許多圖示、標誌設計者的準則，簡單明瞭會比過渡複雜的圖案來得印象深刻。在如此少像素的限制內，過多顏色其實不能提高圖案的細膩，但這並不代表不能用相似色來製作立體效果。
單純的線條 - 別用太複雜的曲線和字體，尤其是繁複的手寫體，製造出來的效果反而會模糊不清。

製作完成後，將圖示下載並儲存在您的電腦上。

2. 上傳 Favicon 圖檔

接著，圖示檔案必須上載到網路上某個位置。如果您是網站管理者，應已知道如何上載。若是用免費網站或網誌平台，可以利用後台上傳的功能來上傳至網路相簿或網路硬碟上。上傳完後，拷貝檔案網址以給下一步用。

3. 修改並植入 Favicon 程式碼

上傳完畢後，必須在和之間插入以下的程式碼，並將{圖示網址}改成您剛上載的圖示位置：

1 2	<link rel="shortcut icon" href="{圖示網址}" type="image/x-icon" /> <link rel="icon" href="{圖示網址}" type="image/x-icon" />

舉例，如果圖片網址為 http://example/favicon.ico，那程式碼應更改為：

1 2	<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" /> <link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon" />