码农教程 - 一技在手,衣食无忧! tools

目录

如何 - 在 HTML 中添加网站图标

❮ 上一节 下一节 ❯

了解如何在 HTML 中添加网站图标。

如何在 HTML 中添加网站图标

图标是浏览器选项卡中页面标题旁边显示的小图片。

您可以使用任何您喜欢的图片作为您的网站图标。您还可以在以下网站上创建自己的网站图标https://favicon.cc。

提示：网站图标是一个小图片，因此它应该是一个具有高对比度的简单图片。

网站图标图片显示在浏览器选项卡中页面标题的左侧，如下所示：

Example of favicon

要将网站图标添加到您的网站，请将您的网站图标图片保存到网络服务器的根目录中，或者在根目录中创建一个名为 images 的文件夹，并将您的网站图标图片保存在此文件夹中。网站图标图片的常用名称是"favicon.ico"。

接下来，添加一个<link>元素添加到您的 "index.html" 文件中，位于<title>元素，像这样：

示例

<!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" 文件并将其重新加载到浏览器中。您的浏览器选项卡现在应该在页面标题的左侧显示您的网站图标图片。


❮ 上一节 下一节 ❯