HTML 網站圖示
網站圖示是一個顯示在瀏覽器選項卡中頁面標題旁邊的小影像。
如何在 HTML 中新增網站圖示
您可以選擇任何您喜歡的影像作為您的網站圖示。您也可以在類似 https://www.favicon.cc 這樣的網站上建立自己的網站圖示。
提示： 網站圖示是一個小影像，所以它應該是一個對比度高且簡單的影像。
網站圖示影像會顯示在瀏覽器選項卡中頁面標題的左側，如下所示：
要為您的網站新增網站圖示，請將您的網站圖示影像儲存在 Web 伺服器的根目錄中，或者在根目錄中建立一個名為 images 的資料夾，並將您的網站圖示影像儲存在該資料夾中。網站圖示影像的常用名稱是 "favicon.ico"。
接下來，在您的 "index.html" 檔案中，在 <title> 元素之後，新增一個 <link> 元素，如下所示：
示例
<!DOCTYPE html>
<html>
<head>
<title>我的頁面標題</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
現在，儲存 "index.html" 檔案並在瀏覽器中重新載入。您的瀏覽器選項卡現在應該會在頁面標題的左側顯示您的網站圖示影像。
網站圖示檔案格式支援
下表顯示了網站圖示影像的檔案格式支援：
| 瀏覽器 | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | 是 | 是 | 是 | 是 | 是 |
| Chrome | 是 | 是 | 是 | 是 | 是 |
| Firefox | 是 | 是 | 是 | 是 | 是 |
| Opera | 是 | 是 | 是 | 是 | 是 |
| Safari | 是 | 是 | 是 | 是 | 是 |
Chapter Summary
- 使用 HTML
<link>元素插入網站圖示
HTML Link 標籤
| 標籤 | 描述 |
|---|---|
| <link> | 定義文件與外部資源之間的關係 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
