您当前的位置: 站长圈 > 技术文章 > 网页前端 > 如何制作网站ico图标

如何制作网站ico图标

来源:站长圈 作者:adminroy 点击: 0

因为网站需要,今天要制作一个ico图标,那么什么是ico图标呢,先看看它的样子吧,比如你打开百度,就可以在网页标题前面看见,红框选择的地方就是网站的小图标了,ico图标可以作为标志,目前主流的浏览器都支持ico图标,它显示于浏览器的地址栏、标签及收藏夹上,一般情况下,作为把网站标志的ico图标大小为16×16,下面就来一步步为我们自己的网站做一个个性化的图标吧。



首先,先要有一个自己的图片图标,如

这个图标最好是个透明背景的矢量图片,这样缩小的时候比较不会失真,你可以先等比例缩小成你要的尺寸,如32*32,16*16,当然等一下直接转换也可以。

然后我们要找一个转换工具,我制作的时候是找了几个在线制作的工具,网址是
http://tools.dynamicdrive.com/favicon/#.UkKSLFO6CWU
http://www.damotou.com/index.php
http://www.bitbug.net/
第一个是一个外国网站,不过不妨碍我们操作,因为只要简单的2、3步就可以完成了,如图:

红箭头所示就是要操作的步骤,首先浏览上传你的logo图片,如果你不选择绿框所示的尺寸,默认就是导出16*16的图标,如果你想选择32*32或者48*48的可以在选项前打上勾,然后就点击Create Icon按钮生成小图标

然后如上图所示会出来一个生成的小图标预览,点击下载按钮下载到你本地,有一个一个favicon.ico文件就是了。


接下来就是怎么让你的网页显示这个图标了。打开我们的网页,在网页头部,也就是<head></head>中间放上 <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" media="screen" />这一段代码,注意图片路径一定要写对,绝对路径或者相对路径都没关系,然后就OK了。

这里有一个地方需要注意,如果你是在本地测试,IE里是看不见效果的,而火狐里可以看见,所以你要放到空间里,就可以让朋友们看见你个性化的图标,并因此注意且记住到您的网站喽,试试吧。