在 HTML 中插入標籤圖示

Sushant Poudel 2023年2月19日 2021年10月2日
  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 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