当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML 网站收藏图标

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-05-21 08:53:01

HTML 网站图标或收藏夹图标是用户在浏览网页时显示在浏览器标签标题左侧的一个小图标。当用户将网页地址添加到书签或收藏夹时，这个图标也会显示在收藏夹网页标题的左侧。

这个图标看似可有可无的东西，但它的存在会给浏览者或多或少留下一定印象，可以说，它是个人品牌的象征。因此，还不能低估这个小小图标的作用。

HTML Favicon的用处

HTML Favicon可以在以下几个地方出现：

（1）在浏览网页时，它出现在浏览器标签中标题的左侧

（2）Favicon会出现在收藏夹网页标题的左侧

（3）Favicon会出现在浏览器浏览历史标题的左侧

（4）Favicon会出现在一些搜索引擎搜索结果标题的左侧

准备图标

首先你需要准备一张图标或图片，这个图标或图片的体积不易过大，以便能快速加载，尺寸以16×16像素宽高比相同的图片为佳。同时，由于图片显示的尺寸不大，要以高对比度最好，否则会模糊不清。

自己若不知怎么制作，你也可以借助一些网站来制作，如下面的网站提供了这样的技术：

https://favicon.io/

https://www.favicon.cc/

https://www.favicon-generator.org/

将制作好的图片或图标以favicon命名，如"favicon.ico"。

HTML Favicon常见尺寸

Favicon图标要设计成宽高相等的图片。

其常见的尺寸为：16×16，32×32，48×48像素。

对于PNG格式的图片推荐使用16×16, 32×32像素的图片，当然浏览器可以接受任何方形图片，只是过大的图片会影响加载速度。

HTML中添加Favicon的方法

将准备好的Favicon图标上传保存到网站的根目录或网站中用于保存图片的其他目录中，如images。

然后在网页的<head>部分<title>元素之后的地方使用<link>元素添加图标。

也可以像下面这种设置不同情境下的favicon:

下面是一个更完整的例子。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Favicon</title>
<link rel="icon" sizes="32×32" href="/other/img/icon-64.png" type="image/png">
</head>
<body>
<h1>HTML Favicon</h1>
<p>HTML favicon的例子。</p>
<p>请注意看浏览器标签。</p>
</body>
</html>

读者可以点击这里预览效果。