html如何修改title前的小图标

瑞晟技术服务中心-耿瑞

已于 2023-03-14 15:08:29 修改

阅读量1.4w

点赞数 15

文章标签： html修改title前的小图标

于 2019-12-04 17:06:21 首次发布

本文链接：https://blog.csdn.net/weixin_45966674/article/details/103390213

版权

本文介绍如何使用.ico格式图片替换网页标题前的小图标。通过画图软件制作.ico图标，并在HTML头部加入<link>标签引用该图标，实现网页图标的个性化定制。

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

html如何修改title前的小图标

大家好，我是凡玉。今天来和大家分享WEB前端的一个小常识，如何改变title前的图标，这个图标是不能用普通的图片替换的，要用后缀为ico的图片文件进行替换。
下面凡玉就来带大家一起做一个ico图片，并用它修改title前的小图标。
首先我们找到一张图片在(打开方式)里选择《画图》
在这里插入图片描述画图里也有可以修饰图片的工具，当你对图片满意后就可以点击 (文件>另存为)文件类型选择24位位图bmp完成后再手动将文件后缀改为ico，这样我们的ico图就完成了。
之后我们在html文件里的head标签内加入<link rel = "icon" href = "ico文件路径">就可以了。
代码如下:

<!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">
        <link rel = "icon" href ="images/title.ico">
        <title>修改title图标</title>
    </head>
    <body>
    
    </body>
</html>

效果图:
在这里插入图片描述