在 HTML 中插入标签图标

Sushant Poudel 2023年2月19日 2021年10月2日
  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 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