需要先把图片格式转换为.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. dubbo起停之配置注解

    虽然说多种方式配置dubbo最后殊途同归实例化为dubbo的各配置对象,但是了解下注解的解析过程也能让我们清楚dubbo在spring bean的什么时候怎么样实例化一个代理对象,这点来说了解整个过程 ...

  2. kafka入门之broker-水印和leader epoch

    每个kafka副本对象都持有2个重要的属性:日志末端位移LEO,高水印HW Kafka对leader副本和follower副本的LEO更新机制是不同的,后面我们会详细讨论. Kafka对leader副 ...

  3. Apache Beam，批处理和流式处理的融合！

    1. 概述 在本教程中,我们将介绍 Apache Beam 并探讨其基本概念. 我们将首先演示使用 Apache Beam 的用例和好处,然后介绍基本概念和术语.之后,我们将通过一个简单的例子来说明 ...

  4. 【刷题笔记】DP优化-状压

    因为篇幅太长翻着麻烦,计划把DP拆成几个小专题,这里原文只留下状压,其他请至后续博文. 状态压缩优化 所谓状态压缩,就是将原本需要很多很多维来描述,甚至暴力根本描述不清的状态压缩成一维来描述. 时间复 ...

  5. 转：使用DOS命令chcp查看windows操作系统的默认编码以及编码和语言的对应关系

    代码页是字符集编码的别名,也有人称"内码表".早期,代码页是IBM称呼电脑BIOS本身支持的字符集编码的名称.当时通用的操作系统都是命令行界面系统,这些操作系统直接使用BIOS供应 ...

  6. 第11.11节 Python正则表达式的指定重复次数匹配模式及元字符”{}”功能介绍

    在<第11.8节 Pytho正则表达式的重复匹配模式及元字符"?". "". "+"功能介绍>和<第11.10节 Pyth ...

  7. day010|python之装饰器

    装饰器02 目录 装饰器02 1 装饰器的语法糖 1.1 定义 1.2 基本使用 2 有参装饰器 2.1 基本用法 2.2 示例 3叠加多个装饰器 3.1 基本用法 3.2 示例 4 wraps装饰器 ...

  8. golang omitempty 总结

    golang omitempty 总结 在使用Golang的时候,不免会使用Json和结构体的相互转换,这时候常用的就是 json.Marshal和json.Unmarshal两个函数. 这时候在定义 ...

  9. 四、git学习之——远程仓库

    Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上.怎么分布呢?最早,肯定只有一台机器有一个原始版本库,此后,别的机器可以"克隆"这个原始版本库,而且每台机器的版 ...

  10. webpack与vue使用

    项目基本结构目录: index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch ...