HTML - 加入 Favicon：初學者指南

什麼是 HTML Favicon？

讓我們從一個簡單的問題開始我們對 favicons 世界的探索：你有沒有注意到在瀏覽器標籤上網站標題旁邊的那些小圖標？親愛的同學們，那就是我們所謂的 favicon！

HTML - Adding Favicon

Favicon，全稱為 "favorite icon"，是一個代表網站的小圖像。它就像一個微型標誌，會出現在多個地方：

在瀏覽器的地址欄中
在瀏覽器標籤上頁面標題旁邊
在書籤列表中
在你將網頁保存到手機首頁時

Favicon 可能很小，但它們在品牌建設和用戶體驗中扮演著重要角色。它們幫助用戶快速識別你的網站在他們的众多打開的標籤或書籤中。

加入 Favicon 的語法

現在我們已經知道 favicon 是什麼，讓我們學習如何將其添加到我們的網頁中。語法非常簡單：

<link rel="icon" href="path/to/your/favicon.ico" type="image/x-icon">

讓我們分解一下：

<link>：這是一個 HTML 標籤，用於定義文檔和外部資源之間的鏈接。
rel="icon"：這個屬性指定了當前文檔和鏈接資源之間的關係。在這個例子中，它是一個圖標。
href="path/to/your/favicon.ico"：這裡是你指定 favicon 文件路徑的地方。
type="image/x-icon"：這個屬性指定了鏈接文件的 MIME 型別。

將 Favicon 加入網頁的步驟

將 favicon 加入你的網頁就像派一樣簡單！只需遵循以下步驟：

創建或獲取你的 favicon 圖像。
將 favicon 保存在你的網站根目錄或圖像文件夹中。
在你的 HTML 文件的 <head> 部分添加 favicon 鏈接。

以下是一個完整的例子：

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的超棒網站</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>歡迎來到我的超棒網站！</h1>
</body>
</html>

在這個例子中，我們將 favicon.ico 文件放在與 HTML 文件相同的目錄中。如果你把它放在圖像文件夹中，你應該使用 href="images/favicon.ico"。

Favicon 尺寸列表

Favicon 有多種尺寸以適應不同的設備和使用情況。以下是一些常見的 favicon 尺寸：

尺寸	使用情況
16x16 px	預設的 favicon，顯示在瀏覽器標籤中
32x32 px	Windows 擔任列
48x48 px	Windows 桌面快捷方式
64x64 px	Windows 開始菜單
152x152 px	Apple 觸控圖標（iOS 設備）
192x192 px	Android 首頁圖標

專業小貼士：為了確保你的 favicon 在所有設備上都能看起來清晰，創建一個單一的超高解析度圖像（如 256x256 px），然後將其縮放到這些不同的尺寸。

不同 Favicon 檔案格式對瀏覽器的支援

並非所有瀏覽器都一樣，尤其是在 favicon 支援方面。以下是一個表格，顯示主要瀏覽器支援哪些檔案格式：

檔案格式	Chrome	Firefox	Safari	Edge	Internet Explorer
ICO	✓	✓	✓	✓	✓
PNG	✓	✓	✓	✓	✗
GIF	✓	✓	✓	✓	✗
JPEG	✓	✓	✓	✓	✗
SVG	✓	✓	✗	✓	✗

如你所見，ICO 格式是最廣泛支援的。然而，現代瀏覽器也支援更多常見的圖像格式，如 PNG，它們更容易操作。

為了確保最大的兼容性，你可以提供多種格式：

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">

這樣，支援 PNG 的瀏覽器會使用它，而較舊的瀏覽器則會回退到 ICO 格式。

結論

現在，我的初出茅廬的網頁開發者們，你已經知道了如何將 favicon 加入到你的網頁中。這是一個小細節，但它可以讓你的網站看起來更專業和精致。

記住，在網頁開發中，就像在生活中一樣，往往是那些小事情最能夠起到關鍵作用。一個精心挑選的 favicon 可以是你精心製作的網站聖代上的櫻桃！

繼續練習，持續學習，最重要的是，樂在其中！誰知道呢？也許你創作的下一個 favicon 將會屬於一個改變世界的網站。快樂編程！

Credits: Image by storyset