html怎么在网页标题栏上添加图标

最新推荐文章于 2024-05-25 13:04:55 发布

Jorwnpay

最新推荐文章于 2024-05-25 13:04:55 发布

阅读量5.3w

点赞数 42

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/qq_41748900/article/details/90079643

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求

像下图这样给网页标题栏加个图标
在这里插入图片描述

方法

需要先把图片格式转换为.ico类型
在这个网址在线转换很方便：https://www.easyicon.net/covert/
在<head></head>加一行来显示图标（注意，如果加入了没有效果，检查一下路径是否正确，文件名是否正确）
在网页标题左侧显示：<link rel="icon" href="图标地址" type="image/x-icon">
在收藏夹显示图标：<link rel="shortcut icon" href="图标地址" type="image/x-icon">

示例


<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
  <title>
    MarioHome
  </title> 
  
  <link rel="icon" href="./mario.ico" type="image/x-icon">  //在网页标题左侧显示图标
  <link rel="shortcut icon" href="./mario.ico" type="image/x-icon">  //在收藏夹显示图标

  <script type="text/javascript" src="D:\\jQuery\\jquery.js"></script>
  <style>

.search { position: relative; width: 78%; margin: 0px auto; padding-left: 3.4em; font-size: 14px;}
.search:after{ clear:both;content:'.'; display:block;clear:both;height:0; visibility:hidden; overflow:hidden;}

.search_t { float: left; width: 78%; height: 60px;margin-left: 0px;  margin-top: 20%; padding-left: 20px; padding-right: 20px; font-size: 18px;/* border: 1px solid #cdcdcd; */border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
.search_b { float: right;  width: 200px; height: 60px;margin-left: 0px;margin-top: 20%;padding-left: 0px; padding-right: 0px; font-size: 18px;/* border: 1px solid #cdcdcd; */border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
.background_{ background:url("./background.jpg") no-repeat; background-size: 100%;}
  </style> 
</head> 

<body class="background_">

<form class="search" action="http://www.baidu.com/baidu" target="_blank">
 <input class="search_t" type=text name=word size=40 placeholder="Input Content">
 <input class="search_b" type="submit" value="搜索"/>
</form>

</body>

效果

在这里插入图片描述

Jorwnpay

关注

42
点赞
踩
105

收藏

觉得还不错? 一键收藏
4
评论
html怎么在网页标题栏上添加图标

需求像下图这样给网页标题栏加个图标方法需要先把图片格式转换为.ico类型在这个网址在线转换很方便：https://www.easyicon.net/covert/在<head></head>加一行来显示图标（注意，如果加入了没有效果，检查一下路径是否正确，文件名是否正确）在网页标题左侧显示：<link rel="icon" href="图标地址" typ...
复制链接

扫一扫