如何给网站设置自定义图标（标签页显示，收藏夹显示）

@cooltea

已于 2022-04-23 23:19:39 修改

阅读量1.3w

点赞数 20

文章标签： html

于 2022-04-23 22:02:49 首次发布

本文链接：https://blog.csdn.net/apple_54470279/article/details/124371299

版权

在 PC 浏览器上显示网站图标

方法1：

在网站根目录下准备一张名为 favicon 的图片，图片格式为 ico 。

图片像素的最小尺寸为：16*16

使用这种方式，网页会自动选取这张图片作为图标，并且该网站目录下的所有网页的图标都会显示为这张图片。

网站目录结构：

标签页图标显示效果：

收藏夹图标显示效果：

方法2：

通过 <link> 标签指定网页图标：

<head>
    <meta charset="UTF-8">
    <title>网站图标显示</title>
    <link rel="icon" href="./image/favicon.ico">
</head>

这种方式的特点：

图片格式和名称不受限制，但不同浏览器可能对格式的要求不一样：

<!-- png 格式也可以 -->
<link rel="icon" href="./image/png_icon.png"> 
<!-- gif 格式也可以 -->
<link rel="icon" href="./image/gif_icon.gif">

<link> 标签中的 rel 属性值也可以是 ”shortcut icon“，主要作用是规定当前文档与被链接文档之间的关系，这里的 rel 表示引用自定义图标。

如果图标无法正常显示，请查看图片命名、格式是否正确；引用路径是否正确；rel 属性值是否正确；

关注