在 HTML 中插入标签图标

  2. 贴士文章
  3. HTML 贴士文章
  4. 在 HTML 中插入标签图标
Sushant Poudel 2023年12月11日
HTML HTML Favicon
  1. 在 HTML 中使用 <link rel="icon"> 和 PNG 图像为网站添加 Favicon
  2. 在 HTML 中使用 <link rel="icon"> 和 ICO 图像为网站添加 favicon
在 HTML 中插入标签图标

标签图标基本上是我们在浏览器标签中看到的一个小图标。它通常看起来像一个以像素为单位的最小尺寸的非常小的图像。它也被称为收藏夹图标。本文将介绍在 HTML 中为网站添加浏览器标签页图标的方法。

我们可以使用 <link> 标签和 rel="icon" 属性在 HTML 中添加浏览器图标。代码中的 <link> 标签将当前文档连接到外部资源。它是通常用于链接到外部样式表的标签。它也被称为空元素，因为它只包含属性。rel 属性还用于定义当前资源和链接资源之间的关系。我们可以在 href 属性中设置要用作收藏夹图标的图像链接的目的地。应在 href 属性中使用带有 .png 扩展名的图像。

首先，你需要将 PNG 图像用作设备上的收藏夹图标。它必须是微小的像素。创建网站图标最常见的尺寸是 16x16 像素。尽管如此，它们也可以以更大的尺寸出现（32x32）。现在，在 HTML <head> 标签内，打开 <link> 标签，并在其中使用 rel 属性。将 rel 属性设置为 icon。在它之后，写入 href 属性并在引号内指定要用作收藏夹图标的 PNG 图像文件。在此之后，关闭所有先前打开的标签。

在这里，我们使用图像 favicon.png 作为图标。映像位于本地系统中。通过这种方式，我们可以在 HTML 中为网页添加图标。

示例代码：

<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>

为了向后兼容，我们可以使用 ICO 图像在 HTML 中的网站中添加网站图标。几乎所有现代浏览器都支持将 PNG 图像用作收藏夹图标。对于 IE10 及其之前版本的浏览器，我们可以使用 ICO 图片。ICO 图像以 .ico 作为扩展名。我们可以使用 ConvertICO 之类的工具将 PNG 图像转换为 ICO。

例如，浏览 ConvertICO 网站并上传 favicon.png 文件。该网站会将图像转换为 ICO 格式并让我们下载。然后，使用 <link> 标签中 href 属性中的图像路径，如第一种方法中所做的那样。然后，我们可以在网页上看到 favicon。

示例代码：

<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
作者： Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn