需要先把图片格式转换为.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>

html怎么在网页标题栏上添加图标的更多相关文章

  1. 如何给网页标题栏上添加图标(favicon.ico)（转）

    如何给网页标题栏上添加图标(favicon.ico)   favicon.ico详解:     favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏 ...

  2. 如何给网页标题栏上添加图标(favicon.ico)

    favicon.ico详解:     favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏和标签标题前面的个性化图标. 设置步骤: 1. 把做好的f ...

  3. 在 input 上添加图标字体时无法添加的问题

    效果:一个搜索框.如图: 实施过程:一开始,将搜索框分为2部分,用2个 input ,一个 search ,一个 button ,然后给 type="button" 的input ...

  4. 如何在网页标题栏加入logo图标？

    标题栏: <link rel="icon" href="ico地址" type="image/x-icon">收藏夹:<l ...

  5. 在网页标题栏title加入图标？

    方法一:制作一个ico格式的图片,将图片命名为favicon.ico,像素大小为16*16,所使用的颜色不得超过16色,然后再把favicon.ico放到网站的根目录下就行了.这样的话浏览器会不停的搜 ...

  6. Android标题栏上添加多个Menu按钮

    最近项目中碰到要在Android Menu旁边再添加一个按钮,而不是点击menu按钮然后在弹出一些选项. MainActivity代码: public class MainActivity exten ...

  7. 在网页标题栏上和收藏夹显示网站logo

    第一步,准备一个图标制作软件. 首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以.ico 作为扩展名.普通的图像设计软件无法使用这种格式,所以您需要到下载一个ico图标工具,本站常 ...

  8. 怎么在app上添加图标和文字

    window.showAddMenu = this.addSearch let data = { type: 'ICON', text: 'https://static-image.lexing360 ...

  9. [Qt] 去掉QMessageBox标题栏上的图标

    msgBox.setWindowFlags(Qt::Drawer);

随机推荐

  1. java Base64算法

    Base64算法并不是加密算法,他的出现是为了解决ASCII码在传输过程中可能出现乱码的问题.Base64是网络上最常见的用于传输8bit字节码的可读性编码算法之一.可读性编码算法不是为了保护数据的安 ...

  2. CSRF&SSRF-初探准备

    了解CSRF之前的必备知识 1.同源策略 同源策略-三个相同:协议.域名.端口 举例说明: 源URL为:http://www.example.com/dir/page.html 协议为:http 域名 ...

  3. MySQL下载及使用

    MySQL下载及使用 在下载MySQL的过程当中一般都不会下载最新版本的软件,因为最新版本的MySQL可能会出现各种问题,也不推荐在原来的版本上更新到最新版本,因为这样可能导致原本项目能正常运行,更新 ...

  4. 使用 Jasypt 加密 Spring Boot 配置文件

    一.添加依赖包 <dependency> <groupId>com.github.ulisesbocchio</groupId> <artifactId> ...

  5. Why系统：0.1 + 0.2 != 0.3

    为了知道更多一点,打算自己来一个why系列. 面试官:同学, 请问 0.1 + 0.2 等于多少 同学:不等于0.3, 因为精度问题 面试官:能更深入的说一下嘛 同学:...... 上面的同学,就是曾 ...

  6. 详解Hadoop3.x新特性功能-HDFS纠删码

    文章首发于微信公众号:五分钟学大数据 EC介绍 ​Erasure Coding 简称EC,中文名:纠删码 EC(纠删码)是一种编码技术,在HDFS之前,这种编码技术在廉价磁盘冗余阵列(RAID)中应用 ...

  7. 大厂是如何用DevCloud流水线实现自动化部署Web应用的？

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

  8. 老猿学5G扫盲贴：推荐三篇介绍HTTP2协议相关的文章

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 5G中的服务化接口调用都是基于HTTP2协议的,老 ...

  9. PyQt学习随笔：槽函数获取信号发送对象的方法

    在PyQt中,相似控件发送的信号可以每个控件信号对应一个槽函数,也可以将相似控件的相同信号对应到一个槽函数,但如果槽函数相同,怎么区分信号是谁发送的呢?那就是在信号函数中使用sender()函数获取信 ...

  10. XSS挑战赛（1）

    以前囫囵吞枣做过一遍,现在从头再来 第一关网址为:http://127.0.0.1/xss-labs-master/level1.php?name=test 而页面上显示了用户test,name可控, ...