在 HTML 中插入標籤圖示

  2. 貼士文章
  3. HTML 貼士文章
  4. 在 HTML 中插入標籤圖示
Sushant Poudel 2023年12月11日
HTML HTML Favicon
  1. 在 HTML 中使用 <link rel="icon"> 和 PNG 影象為網站新增 Favicon
  2. 在 HTML 中使用 <link rel="icon"> 和 ICO 影象為網站新增 favicon
在 HTML 中插入標籤圖示

標籤圖示基本上是我們在瀏覽器標籤中看到的一個小圖示。它通常看起來像一個以畫素為單位的最小尺寸的非常小的影象。它也被稱為收藏夾圖示。本文將介紹在 HTML 中為網站新增瀏覽器標籤頁圖示的方法。

我們可以使用 <link> 標籤和 rel="icon" 屬性在 HTML 中新增瀏覽器圖示。程式碼中的 <link> 標籤將當前文件連線到外部資源。它是通常用於連結到外部樣式表的標籤。它也被稱為空元素，因為它只包含屬性。rel 屬性還用於定義當前資源和連結資源之間的關係。我們可以在 href 屬性中設定要用作收藏夾圖示的影象連結的目的地。應在 href 屬性中使用帶有 .png 副檔名的影象。

首先，你需要將 PNG 影象用作裝置上的收藏夾圖示。它必須是微小的畫素。建立網站圖示最常見的尺寸是 16x16 畫素。儘管如此，它們也可以以更大的尺寸出現（32x32）。現在，在 HTML <head> 標籤內，開啟 <link> 標籤，並在其中使用 rel 屬性。將 rel 屬性設定為 icon。在它之後，寫入 href 屬性並在引號內指定要用作收藏夾圖示的 PNG 影象檔案。在此之後，關閉所有先前開啟的標籤。

在這裡，我們使用影象 favicon.png 作為圖示。映像位於本地系統中。通過這種方式，我們可以在 HTML 中為網頁新增圖示。

示例程式碼：

<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>

為了向後相容，我們可以使用 ICO 影象在 HTML 中的網站中新增網站圖示。幾乎所有現代瀏覽器都支援將 PNG 影象用作收藏夾圖示。對於 IE10 及其之前版本的瀏覽器，我們可以使用 ICO 圖片。ICO 影象以 .ico 作為副檔名。我們可以使用 ConvertICO 之類的工具將 PNG 影象轉換為 ICO。

例如，瀏覽 ConvertICO 網站並上傳 favicon.png 檔案。該網站會將影象轉換為 ICO 格式並讓我們下載。然後，使用 <link> 標籤中 href 屬性中的影象路徑，如第一種方法中所做的那樣。然後，我們可以在網頁上看到 favicon。

示例程式碼：

<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
作者： Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn