在 HTML 中插入标签图标

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

在 HTML 中插入标签图标

作者：迹忆客最近更新：2023/03/27 浏览次数：

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

在 HTML 中使用 `<link rel="icon">` 和 PNG 图像为网站添加 Favicon

我们可以使用 <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/jiyik/favicon.png">
</head>

在 HTML 中使用 `<link rel="icon">` 和 ICO 图像为网站添加 favicon

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

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

示例代码：

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

上一篇：在 HTML 的新标签页中打开链接

下一篇：在 HTML 中创建白色 RGBA

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享