App下載

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

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

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

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

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

首先,我們需要先設(shè)計(jì)一個圖標(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-編程獅,隨時隨地學(xué)編程</title>
</head>
<body></body>
</html>

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

地址欄圖標(biāo)

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

0 人點(diǎn)贊