浏览器地址栏前面的小图标

最新推荐文章于 2021-06-11 14:27:08 发布

jiuson

最新推荐文章于 2021-06-11 14:27:08 发布

阅读量1.3k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/u011063151/article/details/51649049

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近空闲时间比较多，打算学习一下web前端技术：

以前一直没有注意在每次打开浏览器的时候，有些网站的标题栏会有一个小小的logo图标，但是有些网站却没有，而且自己做的网站练习里面也没有用到过这个。今天在学习的时候突然就注意到了，原来这都是网页里面的一个标签在“作祟”！

具体在<head>标签内部添加一个引用标签,并且把引用标签的rel属性设置成rel="icon"或者rel="shortcut icon"，然后将需要作为logo的小图标的地址设置为href属性的值，type的属性设置为type="image/x-icon",这样就能在浏览器中打开网页的时候，标题栏的最左侧就能显示我们的logo小图标了。

代码示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
        <head>
           <title>Test my web logo icon!</title>
           <link rel="shortcut icon" href="icon.ico（你的logo图标地址）" type="image/x-icon" />
        </head>

        <body>
           <p1>Let's try it,now!</p1>
         </body>

</body>
</html>

哈哈，是不是很有意思，赶快动手试试吧！