溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html怎么設(shè)置頁(yè)面圖標(biāo)

發(fā)布時(shí)間：2021-06-04 09:37:39 來(lái)源：億速云 閱讀：959 作者：小新 欄目：web開發(fā)

這篇文章主要介紹html怎么設(shè)置頁(yè)面圖標(biāo)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在html中，可以利用link標(biāo)簽來(lái)設(shè)置頁(yè)面圖標(biāo)；只要在頁(yè)面的head標(biāo)簽中添加“<link rel="shortcut icon" href="頁(yè)面ico圖標(biāo)文件路徑">”代碼即可。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

準(zhǔn)備材料

1、準(zhǔn)備一張32px*32px大小的ico圖標(biāo)。

2、準(zhǔn)備好開發(fā)環(huán)境。

開始制作

設(shè)置網(wǎng)頁(yè)的ico圖標(biāo)其實(shí)比較簡(jiǎn)單，只要在頁(yè)面的head標(biāo)簽中添加一行代碼即可。<link rel="shortcut icon" href="favicon.ico">，這行代碼看著是不是很簡(jiǎn)單？

使用示例如下：

<!--聲明文檔內(nèi)容為html-->
<!DOCTYPE html>
<!--設(shè)置語(yǔ)言為英文-->
<html>
<head>
    <!--設(shè)置文檔默認(rèn)編碼-->
    <meta charset="UTF-8">
    <!--網(wǎng)頁(yè)的title-->
    <title>系統(tǒng)首頁(yè)</title>
    <!--設(shè)置ico圖標(biāo)-->
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<p>Hello World</p>
</body>
</html>

在瀏覽器中刷新頁(yè)面，如果看到類似下圖的效果，那么恭喜你！這一波操作已經(jīng)成功。

html怎么設(shè)置頁(yè)面圖標(biāo)

說(shuō)明：

link元素可以用來(lái)引入HTML頁(yè)面外部的資源文件。在Web開發(fā)過(guò)程中開發(fā)者會(huì)用link將CSS文件引入到頁(yè)面中，當(dāng)然也可以用link設(shè)置ico圖標(biāo)。

rel ：表示將要引用的資源類型。

href：表示指向資源的URL。

<link rel="shortcut icon" href="favicon.ico">,代碼中rel="shortcut icon"是一種固定寫法。如果缺省該屬性會(huì)影響ico圖標(biāo)的正確顯示。所以該屬性千萬(wàn)要記得寫。這行代碼通俗的講就是告訴瀏覽器幫忙引入一個(gè)ico格式的圖標(biāo)，資源的地址在href中。

以上是“html怎么設(shè)置頁(yè)面圖標(biāo)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手