如何给网站地址栏前增添图标

最近一段时间打算搞个blog,突然发现很多网站都有代表自己个性的“logo”。

它们就显示在浏览器地址栏的最前面。假如没有设置这个“logo”的话,地址栏前显示的就是一张空白纸的图片,

相比较而言,效果就差很多了。

如何给网站地址栏前增添图标 - Black Knight - BlAck KniGht 如何给网站地址栏前增添图标 - Black Knight - BlAck KniGht 

学习了一下其实做起来也很简单,下面就我自己掌握的几点知识跟大家分享一下:

这个“logo”其实是一张.ico格式的图片,(我们可以在网站网址的后面加上favicon.ico查看这张图片,

如:http://www.baidu.com/favicon.ico) 不过很遗憾,我们常用的photoshop图片处理软件并不支持这种格式。

所以不能直接用photoshop制作。当然了,我也发现网上有类似的插件,把它下下来以后可能就能让photosop可以打开和保存图片为.ico格式了,但是由于目前photoshop已经升级到CS5版本了,加之电脑的环境各异,插件并不一定能支持。

这里有一个比较简便的方法,就是到网站上去直接转换一下,

这里提供两个可以直接转换的网站:

1.http://www.bitbug.net/     

 2. http://www.kakakeji.com

接下来的做法就按照网站上的提示就行啦~~

1. 将成功生成的图标文件下载并改名为favico.ico,上传到网站根目录。

2. 在网站首页的源文件<head> </head>之间插入下面的斜体部分代码 
<head>
……
<link rel="shortcut icon" href="favicon.ico">
</head>

3.动态ico图标的实现方法,先把做好的gif动态图标命名为favico.gif <head></head>之间加上:

<link rel="icon" href="favicon.gif" type="image/gif" >

4.OK!

原文地址:https://www.cnblogs.com/ken-admin/p/5826374.html