網頁圖標與 IcoFX

圖標 (icon) 是圖形操作介面上最常見的小型物件。幾乎每一個程式、每一種檔案類型，都有它專屬的圖標。微軟的 IE 引入了桌面上的圖標概念，讓網頁也可以有它自己的圖標，使得一張網頁被 IE 儲存在「我的最愛」裡面時，會顯示它的標題 (TITLE) 和圖標。此後，當使用者從「我的最愛」裡面連結到同一張網頁時，在地址列也會顯示網頁圖標。因為網頁圖標是從微軟瀏覽器的「我的最愛」開始的，英文 My Favorites，所以這種網頁用的圖標就稱為「最愛圖標」，英文縮寫成 FavIcon。微軟的 FavIcon 標準說明，標題是 How to Add a Shortcut Icon to a Web Page。

實驗得知，IE 6 對於網頁圖標的處理方式如下。當使用者將網址儲存到微軟的 IE 「我的最愛」時，它要求網頁伺服機提供圖標。如果網頁本身沒有指定圖標， IE 就在伺服器的網頁根目錄裡面尋找 favicon.ico 檔案；如果找不到，就會在伺服器留下一個 File Not Found 的錯誤訊息。在 BCC16 最繁忙的時候 (開學後一個月左右)，伺服機一週可以存下幾萬列如上的錯誤訊息。只要網頁是直接從「我的最愛」開啟的，就會顯示那個圖標。

其他的瀏覽器未必跟隨微軟的作風。以 Firefox 為例，它不主動要求網頁圖標。但是如果網頁指定了自己的圖標，則 Firefox 可以顯示它。

網頁在 HEAD 環境內用以下指令告知瀏覽器，本頁有一張圖標：

<LINK REL="shortcut icon" HREF="圖標檔案路徑名">

圖標檔案的附檔名是 ICO，圖標的解析度至少需有 32x32 和 16x16 兩種，詳於後。例如，本網頁用了以下指令

<LINK REL="shortcut icon" HREF="test.ico">

夾帶一個檔案名為 test.ico 的圖標。

圖標原理

圖標其實就是小型的點陣圖案，而且通常是人為的設計圖案而非自然界影像。而蘋果和微軟分別定義了它們的圖標類型檔案，副檔名是 ICO。網頁圖標也是圖標，於是要求 ICO 類型的檔案。而 ICO 檔案其實就是儲存了幾種不同解析度圖標圖案，並且做了適當壓縮的檔案。

圖標的設計，傳統上都是正方形。可以利用透明的底色使它看起來是個長方形。用在桌面上的圖標比較大，最大可能是 256x256 像素的圖像，但是常見的是 48x48。網頁圖標只顯示在地址列或者選單上，當然不能太大。微軟建議製作 16x16 和 32x32 兩種圖案，放在 ICO 檔案內。

圖標製作工具：IcoFX

我採用一個『圖標特效』軟體來設計和包裝圖標：IcoFX，其中 FX 就是「電影特效」的意思。本教材使用的是 IcoFX 1.6.4 版本 (可自 BCC16 下載)，讀者也可以到 IcoFX 的官方網站 http://icofx.ro/ 下載最新的版本，但是那就可能與本教材所說的有點差異。它本身的標誌是 48x48 的圖案

觀察上面那個 IcoFX 圖標，有兩點值得留意：

它畫在 48x48 的正方形內，顯然背景設定為「透明」，才能顯現這張網頁的底色。
即使解析度只有 48x48，那個圓形已經夠圓了。

IcoFX 是一個具體而微的繪圖軟體，它具備繪圖軟體的基本功能。所以，這份教材的目標雖然是製作圖標，我們恰好也可以從這個軟體開始學習繪圖軟體的操作。

應用軟體的圖標未必獨立成為 ICO 檔案，而是被包含在可執行檔 EXE 或者動態連結檔 DLL 裡面。 IcoFX 的 [File]->[Extract...] 功能，可以打開 EXE 或 DLL 檔案，擷取裡面的圖標出來，然後另外存檔。例如，我從 IcoFX.exe 執行檔內，擷取出來 IcoFX 的圖標檔案，儲存於icoFX.ico，讀者可以下載此圖標檔案，也可以練習從 IcoFX.exe 擷取出來。

此外，讀者可以用 Extract 功能擷取微軟視窗作業系統內的圖標，它們通常被存放在以下 DLL 檔案內。

C:\WINDOWS\system32\pifmgr.dll
C:\WINDOWS\system32\shell32.dll

譬如我們可以從 shell32.dll 擷取一個圖標，再用 IcoFX 的 [File]->[Export Image...] 功能，將圖標檔案轉存成一幅 GIF 的圖檔；例如

，這是一個 48x48 背景為透明的 GIF 圖檔。

檢視 ico 檔案

IcoFX 當然可以開啟已經存在的圖標檔案。例如，讀者請開啟前述的 icoFX.ico 檔案，顯示在 IcoFX 視窗內。由 IcoFX 軟體讀入這個 ICO 檔案，會看到 IcoFX 的工作區內，如下圖。

在上圖的範例中，選擇了 Show Grid (顯示網格)，所以可以清楚看到 48x48 個正方形像素。圖標以 1000% 顯示，也就是放大十倍。你可以放得更大。作者可以只設計一種解析度的圖標，例如 48x48，在轉換成圖標檔案時，IcoFX 可以自動產生其他解析度的圖標：

像素方面：
每邊 16, 32, 48 或 256 像素的正方形
色層深度方面
4-bit (16色)，8-bit (256色)，24-bit (全彩) 和 32-bit (全彩加 Alpha 值)

對照放大十倍的圖標，和它以正常尺度（每個像素對應一個光點）顯示的樣子，就可以 (理論上) 明白陰影怎樣表現出圓弧的效果。

上圖中，那些有著淡色斑點的像素，表示它是透明的。透明並不是一種顏色，而是一個參數，告訴顯像軟體以「透明」的演算法處理那個像素。

從圖像製作圖標

例如 BCC16 所在的伺服機，名叫「李白」，他的首頁 http://libai.math.ncu.edu.tw 有包含「李白」兩個書法字的圖像。我們先抓到那個圖像，將「李白」兩個字切割出來，並縮小成 255x128 的圖像，如下。按右鍵可以儲存這個圖檔 libai.gif。

現在，我們打算利用 libai.gif 製造一個 32x32 的網頁圖標，構想是讓「李」字偏左上角，而「白」在右下角，而「白」可以利用「李」右下方留下的空間。做好之後就像，它被用在「李白」的一般網頁上，例如 http://libai.math.ncu.edu.tw/。

我們可以使用 IcoFX 的 [File]->[Capture...] 功能，捕捉螢幕上的一塊正方形區域，當作圖標的基礎。選取這個功能之後，可以設定想要擷取的正方形邊長 (單位是「像素」)。例如作者擷取他自己的首頁照片的一部份，做成了圖標。請看 http://libai.math.ncu.edu.tw/~shann。

讀者不難發現，以自然影像做成的圖標並不非常理想，這是因為自然影像太複雜，而圖標的解析度不足，很難表現複雜的圖像。

更改應用程式的圖標

幾乎每個視窗內的應用程式都內附圖標。 IcoFX 聲稱它可以置換這些軟體內建的圖標。因為應用程式的圖標通常被包裹在 EXE 檔案內，這意味著你必須更動 EXE 檔案才能更換圖標。這是很危險的事情，奉勸讀者少做這種事。至少，在做之前，先備份 EXE 檔案。

在 IcoFX 官網上聲明的程序如下：

在功能表打開 [Tools]->[Resource Editor...] 對話窗
在對話窗內開啟 [Open] 一個含有圖標的 EXE 或 DLL 檔案
對話窗內將會顯示檔案內含的所有圖標，選擇其中一個，按 [Change] 按鈕（如下圖），然後挑選磁碟上的另一個圖標。
理論上，這樣就成了；本文作者並沒有實驗過。

注意：此處所有文件均為原著，個別的版權宣告日後會一一公布，整體版面設計亦尚未完成。但仍請勿抄襲文字與圖片，以免觸犯著作權法。

Back to the home page of Wei-Chang Shann.
Connect to the home page of Department of Mathematics, National Central University, Taiwan.

shann@math.ncu.edu.tw