2009/9/22

為網站加入代表圖像

在大部份較有規模的網站中,如果你瀏覽其中的網頁,會發現該網站都會有一個代表圖像(Icon),出現在瀏覽器的網址列和頁籤上面。這個圖像是怎麼加上去的呢?

關鍵在於網頁標簽中這行:

<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="..." />
<link rel="shortcut icon" href="Images/favicon.ico" />
<title>

把上面以粗體字標示的文字拷貝下來再貼到你的網頁中,就可以了。如果你使用 VS 開發網站並使用 Master Page 的話,那麼你可以只在 Master Page 加上這一行,其它網頁都不需要再動手。

在上面例子中, Images/favicon.ico 是這個 icon 圖像檔的所在位置,你可以隨你的需要變更。但是這個 icon 檔案是如何產生的呢?

如果你使用 VS2005 的話,你會發現它似乎無法讓你憑空製作一個出來。是的,這確實是一件很奇怪的事。不過還是有幾個辦法;第一,是建立一個 Windows 專案,那時 VS2005 就會允許你建立 icon 檔了。

或者,你可以從其它網站「借」一個過來自己改。你可以直接從本站下載我製作的 icon 檔,然後再拿去修改。

第三個方法,就是使用其它繪圖軟體來繪製。不過這個檔案必須嚴格限制為 16X16 的大小,顏色也只能有16色。

VS2005 有個非常奇怪的問題,那就是你無法直接編輯這個 icon 檔。如果你從網頁專案中打開這個檔案,你看起來似乎可以正常編輯並儲存,但你可能會發現它實際並沒有把你所作的修改進行儲存。換句話說,你對它所作的任何修改都是無效的!

由於有這個奇怪的 bug,所以你在進行修改前最好多留意,免得做了白工。

但是還是有辦法使用 VS2005 來編輯它。那就是不要在網頁專案中打開它來做編輯,而是單獨開啟並編輯這個檔案,就可以儲存了。我再說一次,就是在沒有開啟任何網頁專案的情況下,直接去開啟這個 icon 檔來做編輯,或是直接開啟 icon 檔,將 VS2005 呼叫出來進行編輯。

此外,如果你跟我一樣使用 Maxthon 瀏覽器的話,你可能會發現這個 Icon 不會出現(IE 反而完全正常)。這是因為你沒有把 icon 檔放置在網頁伺服器根目錄(C:\Inetpub\wwwroot\)下面的關係。你可以試試,將 icon 檔拷貝一份,再複製到 IIS 根目錄(必須同名)就行了。

Technorati 的標籤:,

沒有留言:

張貼留言