Windows XP 為網站建立與設定 Favicon.ico 完整教學

瀏覽器網址列與分頁前的小圖示稱為 Favicon（Favorite Icon），能提升網站辨識度與專業形象。本文完整教學從 Photoshop 設計圖示、線上轉換 ICO 格式、上傳至網站根目錄、至 HTML 程式碼引用的全流程。

一、設計圖示源檔 (Photoshop)

1. 新建檔案，設定寬高相同（正方形），建議 64×64 或 128×128 像素，背景透明。

2. 使用漸層工具設計背景，設定前景/背景色彩。

3. 拖曳填滿漸層背景。

4. 加入文字/圖形，調整字體大小顏色。

5. 「影像」 → 「影像大小」調整為標準 16×16 像素。

6. 另存為 PNG 格式（或 JPG/GIF）。

二、線上轉換 Favicon.ico 並部署

1. 搜尋「favicon.ico 線上製作」，進入線上轉換網站。
2. 上傳剛設計的 PNG，選擇 16×16 尺寸，產生 ICO 檔並下載。

3. 將下載的檔案重新命名為 favicon.ico。

4. 透過 FTP 上傳至網站根目錄（與 index.html 同層）。
5. 在網頁 <head> 區塊加入引用代碼：

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

6. 瀏覽網站確認網址列與分頁出現小圖示。

進階提示

• 現代瀏覽器支援 32×32、48×48、180×180 (Apple Touch Icon) 等多尺寸
• 可使用 `` 提供多解析度
• ICO 檔可內含多尺寸圖示，相容性最佳

完成部署後，您的網站將在瀏覽器標籤與書籤中顯示專屬圖示，增強品牌識別。