App下載

如何設(shè)置地址欄前面的小圖標(biāo)？附源碼！

猿友 2021-05-12 10:06:55 瀏覽數(shù) (3389)
反饋

當(dāng)我們?yōu)g覽網(wǎng)頁時(shí)，你是否有留意到地址欄前面的小圖標(biāo)。那么這篇文章教你如何設(shè)置地址欄前面的小圖標(biāo)。

一般來說，使用的小圖標(biāo)即為網(wǎng)站的 logo，亦或是與該網(wǎng)站相關(guān)的內(nèi)容。地址欄前面的小圖標(biāo)如下圖所示：

地址欄前面的小圖標(biāo)

首先，我們需要先設(shè)計(jì)一個(gè)圖標(biāo)，所謂的圖標(biāo)是以 ?.ico? 作為拓展名的，圖標(biāo)大小為 16*16（以像素為單位），為了保證圖標(biāo)清晰，所使用的的顏色最好不要超過 16 色。

之后，我們在 HTML 文件的?<head></head>?標(biāo)簽中插入以下代碼即可：

<link rel="icon" href="圖標(biāo)路徑" type="image/x-icon">

以 w3cschool 官網(wǎng)為例，地址欄的設(shè)置代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon"  type="image/x-icon">
	<title>w3cschool-編程獅，隨時(shí)隨地學(xué)編程</title>
</head>
<body></body>
</html>

實(shí)現(xiàn)效果如下：

地址欄圖標(biāo)

以上就是文章“如何設(shè)置地址欄前面的小圖標(biāo)？附源碼！”的全部內(nèi)容。更多 HTML 學(xué)習(xí)請關(guān)注 w3cschool 官網(wǎng)。

HTML

0 人點(diǎn)贊