需要先把图片格式转换为.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. 提交的忠金融的bug

  2. python+selenium下载和上传文件

    操作浏览器上传文件,先看代码 1 """ 2 * send_keys() 指定文件上传路径. 3 """ 4 from selenium i ...

  3. Java基础教程——字符流

    字符流 字节流服务文本文件时,可能出现中文乱码.因为一个中文字符可能占用多个字节. 针对于非英语系的国家和地区,提供了一套方便读写方式--字符流. java.io.Reader java.io.Wri ...

  4. 学习关注:学习C++的前景

    许多朋友都有这样的疑问,学习C/++能做什么?有什么好处?薪资怎么样,下面就为大家来解答! 像前面的文章有提到过,计算机专业位列热门专业第一门,可想前景如何.C语言C++属于高级语言,适合人类编写,现 ...

  5. Spring Framework 5.0简述

    从Spring框架5.0开始,Spring需要JDK 8+ (Java SE 8+),并且已经为JDK 9提供了现成的支持. Spring框架还支持依赖注入(JSR 330)和通用注释(JSR 250 ...

  6. How tomcat works(深入剖析tomcat)阅读笔记1-4章

    How tomcat works chapter 1 简单的web服务器 这一张的主要内容就是实现一个简单的静态资源服务器,socket编程,利用java提供的socket和serverSocket编 ...

  7. vue获取浏览器地址栏参数(?及/)路由+非路由实现方式

    1.? 参数 浏览器参数形式:http://javam4.com/m4detail?id=1322914793170014208 1.1.路由取参方式 this.$route.query.id 前端跳 ...

  8. SSM框架之MyBatis框架实现简单的增删改查

    MyBatis框架介绍 MyBatis是一个优秀的数据持久层框架,在实体类和SQL语句之间建立映射关系是一种半自动化的ORM实现,其封装性要低于Hibernate,性能优越,并且小巧,简单易学,应用也 ...

  9. 第8.23节 Python中使用sort/sorted排序与“富比较”方法的关系分析

    一. 引言 <第8.21节 Python中__lt__.gt__等 "富比较"("rich comparison")方法用途探究>和<第8.2 ...

  10. 第十章、Qt Designer中的Spacers部件

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一. 引言 在Designer的部件栏中,有两种类型的Spacers部件,下图中上面布局中为一个水平 ...