您的位置: 首页  >  文章  >  自定义网页头部前面小图标

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

分类: 文章 • 2024-10-12 13:44:09

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

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

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

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

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

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4.     <head>  
  5.         <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />  
  6.         <title>首页</title>  
  7.     </head>  
  8.     <body>  
  9.   
  10.     </body>  
  11. </html>  

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

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

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

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

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







转账地址：http://blog.****.net/gaohuanjie/article/details/63686920




相关推荐