在 HTML 中插入標籤圖示
-
在 HTML 中使用
<link rel="icon">
和 PNG 影象為網站新增 Favicon -
在 HTML 中使用
<link rel="icon">
和 ICO 影象為網站新增 favicon
標籤圖示基本上是我們在瀏覽器標籤中看到的一個小圖示。它通常看起來像一個以畫素為單位的最小尺寸的非常小的影象。它也被稱為收藏夾圖示。本文將介紹在 HTML 中為網站新增瀏覽器標籤頁圖示的方法。
在 HTML 中使用 <link rel="icon">
和 PNG 影象為網站新增 Favicon
我們可以使用 <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>
在 HTML 中使用 <link rel="icon">
和 ICO 影象為網站新增 favicon
為了向後相容,我們可以使用 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 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