如何在 HTML 中添加網站圖標

學習如何在 HTML 中添加網站圖標（Favicon）。

如何在 HTML 中添加網站圖標

網站圖標（favicon）是顯示在瀏覽器標簽頁中頁面標題旁邊的小圖像。

您可以將任何您喜歡的圖像用作網站圖標。您也可以在諸如 https://favicon.cc 之類的網站上創建自己的網站圖標。

提示：網站圖標是一個小圖像，因此它應該是一個具有高對比度的簡單圖像。

網站圖標圖像顯示在瀏覽器標簽頁的頁面標題左側，如下所示：

網站圖標的例子

要將網站圖標添加到您的網站，請將您的網站圖標圖像保存到 Web 服務器的根目錄，或者在根目錄中創建一個名為 images 的文件夾，并將您的網站圖標圖像保存在此文件夾中。網站圖標圖像的常用名稱是 "favicon.ico"。

接下來，在 "index.html" 文件中的 <title> 元素后面添加一個 <link> 元素，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

親自試一試

現在，保存 "index.html" 文件，并在瀏覽器中重新加載它。您的瀏覽器標簽頁現在應該在頁面標題的左側顯示您的網站圖標。