html中自定义浏览器标题栏小图标

最新推荐文章于 2024-10-10 15:02:47 发布

原创最新推荐文章于 2024-10-10 15:02:47 发布 · 6.6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #标签

本文详细介绍如何在HTML中设置自定义的浏览器标题栏小图标，包括必要的代码示例及.ico格式图片的要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中自定义浏览器标题栏小图标

很多的网站标题栏都会加上独特而专属的小图标，今天学习HTML进阶，刚好学到了，便来记录一下啦！！！希望和我一样的菜鸟小伙伴能够学到知识哦！！！

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>傻猪猪的网站</title>
    <link rel="shortcut icon" type="image/x-icon" href="../images/favicon1.ico"/>
</head>
<body>
     
</body>
</html>

效果
在这里插入图片描述

当然，这么一长段代码，最重要的是这句啦！！！前方高能。请注意！！！！

<link rel="shortcut icon" type="image/x-icon" href="../images/favicon1.ico"/>

说明
这么好看的小图标当然是放在link标签里面啦，首先，rel属性和type属性不用多讲啦，是固定的，按照这样写就行了哦，不同的是href属性，指定小图标存放的位置，注意，路径我们一般都用可爱的相对路径啦，（注意复习一下相对路径的写法哦）。

傻猪猪温馨提示：
图片的格式，只能用very very very适合的 .ico 格式的文件,可以通过强大的photoshop工具生成.ico文件，也可以在线搜索在线icon，通过方便快捷的在线转换工具进行格式转换，转换时注意图片的大小选择1616，1616, 16*16的哦！！！！（重要的事情说三遍！！！）