上网时很多人发现每一个访问的网站在浏览器选项卡中显示的图标不同。如下：

clip_p_w_picpath001

clip_p_w_picpath002

clip_p_w_picpath003

那么我们进行开发的时候，也要实现这个功能，怎么做呢。其实很简单，按照如下步骤完成即可。

首先，先准备好我们的图片，格式要 ico ，必须是ico，因为，不同的浏览器支持不同。

clip_p_w_picpath004 使用jpg图片或png图片，在firefox和Chrome中没有问题，但是IE – 8 地下是不好用的，所以必须转换为好，方式有很多种，

但是，转换的图标在Oper内不能显示，网上下了一个好用。图标最好原版的，不是转换的。大小：16*16。 ico格式。

第二，准备好图标之后，建立web项目。服务器端无所谓，只要能提供web请求服务即可。我们的主要内容在HTML页面代码上。

第三，把图标放入项目的根目录下。

第四，建立显示图标的html页面或其他语言页面。此文使用的是jsp页面。

项目结构：图标在根目录下。

clip_p_w_picpath005

页面代码：

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>我的图标</title>

<link rel="SHORTCUT ICON" href="ico.jpg" type="p_w_picpath/x-icon"/>

</head>

<body>

</body>

</html>

粗体部分就是代码，很简单。

运行项目测试：

IE – 8 需要清空缓存。

clip_p_w_picpath006

IE – 8 地址栏：

clip_p_w_picpath007

FireFox：

clip_p_w_picpath008

Chrome：

clip_p_w_picpath009

Opera：

clip_p_w_picpath010

但是换了一张图标之后就好了。

clip_p_w_picpath011

也许是我的图标使用转换工具转换的原因吧。待查。

Safari：

clip_p_w_picpath012

但是，换了图标之后：

clip_p_w_picpath013

也许是图片问题，也许就是浏览器问题。

目前没有找到原因。