网站图标就是俗说的favicon。有了它，通过浏览器访问你的网站时就可以在地址栏的地址前面显示出来。比如你现在看到的这个页面，在浏览器地址栏开头部分显示了一个“红色c+蓝色z”的图标就是了。另外，当别人收藏你的网站的时候，网站名称前面也会显示这个网站LOGO。Google现在也开始将这个图标转换成图片用在很多地方，比如水景一页的站外资源页上面就使用了这样的功能，在每个地址前显示该地址的logo。

那么，如何制作并使用网站图标呢？下面一步步进行说明。

一、制作LOGO图片¶

第一步当然是要先制作出你要用来作为图标的图片，可以是 jpg、png、bmp、gif 等格式。最好是正方形的，大于96*96像素，并且图片文件不大于150KB。例如我的原始图片，见右边的图。

如果你希望图标的背景是透明的，就必须使用 gif 或者 png 格式了。

可以使用 photoshop 来制作，当然别的方法也行。这就不是本文能解决的问题了。

二、将图片转换为图标¶

图标和图片是不同的，图标必须是 .ico 格式。可以到Dynamic Drive网站去免费转换。转换方法：

转换图片为 favicon 图标

如上图所示，打开上面提到的网址后看到该页面，

1、单击 1 处上传你制作好的图片；

2、勾选 2 处的两个勾，使图标包含不同大小的格式；

3、单击 3 处的按钮进行转换，结果如下图，单击下面的蓝色按钮下载即可。

从上面的图片上还能看到图标的显示效果，如果不满意就重新制作吧。可以看到，水景一页的图标使用的就是透明背景。

三、使用网站图标¶

1、先将下载好的 favicon.ico 文件上传到网站服务器根目录；

2、修改网页模板，在 </head> 标记前面插入下面的 html 代码：

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

另外，如果你也使用的是WordPress建的网站，修改方法是在你使用的主题文件夹里，找到页头模板（如，header.php ），打开后找到 </head> 并在它前面加上上面的 html 代码。

好了，这样就可以了。不过添加完成之后并不是立即可见的，也许要等待一到两天。当然，如果你清除自己的浏览器缓存（包括 cookie ），也许会立即就能看到。我忘记了。©

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/make-and-use-favicon-for-ur-site/>。转载请保留此信息及相应链接。