IT博客汇 | [原]自定义网页头部前面小图标

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

wangshuxuncom发表于 2017-03-19 18:41:38

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

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工程的目录结构如下图所示：

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