自定义网页头部前面小图标

太过爱你忘了你带给我的痛 2022-09-30 06:49 124阅读 0赞

打开百度首页或其它网页往往会在网页头部看到各式各样的小图标(如下图)，那么如何在自己开发的网站配置那样的图标呢？

![Center][]      ![Center 1][]

1、创建Web工程（这里在Eclipse中创建一个名为sirius的Web工程）

2、在WebContent根目录创建一个名为images的文件夹，将制作好的小图标拷贝到该文件夹中

3、在WebContent根目录创建一个名为index.jsp文件，文件内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    		<title>首页</title>
    	</head>
    	<body>
    
    	</body>
    </html>

注意：jsp文件中<link rel=*"shortcuticon"* href=*"小图标路径"* type=*"image/x-icon"* />即用于设置网页头部所显示的图片

4、通过以上3步，Web工程的目录结构如下图所示：

<table></table>

![Center 2][]

5、使用Web服务器发布该Web项目（这里使用Tomcat）；打开浏览器，在地址栏输入相应http地址，即可看到效果，如下图：

![Center 3][]

[Center]: https://img-blog.csdn.net/20170319184807039?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220708/cc5f1b305d474ae28b58565426c259ba.png
[Center 2]: /images/20220708/97bb5da0939d4263886bebfc469ec7ad.png
[Center 3]: /images/20220708/c6b5f033fcbe4ded994e8c2be45b6dd3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app自定义头部栏

<uni-search-bar :radius="100" bgColor='fff' placeholder="搜索" @confirm="search"></uni

落日映苍穹つ/ 2022年12月26日 08:20/ 0 赞/ 94 阅读

相关 EasyAdmin 控制器自定义方法，自定义模板头部

在对应的方法内加入下面一句： $this->layout && $this->app->view->engine()->layout(false); 完整代码类似

电玩女神/ 2022年12月13日 14:23/ 0 赞/ 385 阅读

相关支付宝小程序自定义头部组件

支付宝小程序自定义头部组件 view <view class="nav-header" style="height:{ {navbarData.isF

约定不等于承诺〃/ 2022年12月08日 15:59/ 0 赞/ 420 阅读

相关自定义网页头部前面小图标

打开百度首页或其它网页往往会在网页头部看到各式各样的小图标(如下图)，那么如何在自己开发的网站配置那样的图标呢？ ![Center][] ![Center 1][

太过爱你忘了你带给我的痛/ 2022年09月30日 06:49/ 0 赞/ 125 阅读

相关 mui自定义图标

研究了一下自定义图标，不仅仅可以在h5里面用，还可以在小程序或者别的开发环境里面用。首先找到图标源，我自己找的是阿里巴巴矢量图库。 ![watermark_type_Zm

曾经终败给现在/ 2022年03月19日 17:40/ 0 赞/ 397 阅读

相关微信小程序-自定义头部导航

先展示效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

╰半夏微凉°/ 2022年03月11日 06:16/ 0 赞/ 308 阅读

相关微信小程序自定义头部导航栏 navigationStyle

![735803-20181009165734626-1757202850.png][] 但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示： ![73580

深藏阁楼爱情的钟/ 2021年12月14日 13:49/ 0 赞/ 1021 阅读

相关 li自定义图标

/自定义list的图标/ li{ list-style-image: url(../img/21.JPG); } 转载于:htt

短命女/ 2021年10月01日 03:34/ 0 赞/ 461 阅读

相关自定义图标列表

采用GDI+绘图。可以贴入自己想要的图片，支持png，bmp，jep等格式的图片，并且图片可以自适应大小。效果图： ![20170827233118933][] 源

布满荆棘的人生/ 2021年09月22日 08:10/ 0 赞/ 465 阅读

相关 uniapp 自定义头部导航

html 引用需要自行更改图片路径 <view class="bac-box"></view>  <view

亦凉/ 2021年07月25日 16:17/ 0 赞/ 1056 阅读