当前位置: 首页 > 图文教程 > 网站运营 > 建站经验 > 网站地址栏前面的小图标favicon.ico制作方法

建站经验
经验:我的设计公司创业
网页设计指导:网站设计的主要方面
登陆页高效优化思路是简单再简单!
建设个人网站一定要知道网站用户的信息
经验分享:登陆页优化的七大规则
解决论坛的收录问题:百度BBS收录协议
经验:可用性第一法则,不要听用户的
个人站长:电子论坛和留言板如何进行专项备案
搜狐与新浪的第一门户之争:论中国第一门户
网站价值将不再以流量论成败--效果营销时代
百度联盟:如何有效的与百度联盟沟通
站长建站须知:网站主机的服务器技术
网站如何能更明确的表现自身优势?
网站SEO:搜索引擎优化的基本要素
“玉米商”辍学抢域名闷声挣钱 月收入30万美金
想建立网站,科学规范书写网站规划书
搜索优化:传统的网站结构面临挑战?
Web网站的设计、管理与维护的十二项要点
Google提醒站长:交换链接会降低PR指数
参考:我的SEO方案-统观全局,注意细节

建站经验 中的 网站地址栏前面的小图标favicon.ico制作方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 337 ::
收藏到网摘: n/a

有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做的呢?

制作网站图标

那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将你的网站放入收藏夹之后,网站图标的作用就出来了,它可以使你的站点在众多网址中突出显示,对于用户体验起到很好的作用,好了,废话不多说,现在来告诉大家怎么做favicon.ico这个网站图标文件。

虽然现在有很多在线制作网站图标的网站,但制作出来的图标实在是差强人意,而且不支持透明样式的ico,这非常糟糕,而为一个小小的文件再装个专业的ico制作工具又有点浪费,其实用Photoshop就可以很方便的制作出漂亮的ico文件,我们知道Photoshop是无法保存ico格式的文件的。

怎么办呢,下载这个东东ICOFormat,下载以后将解压出来的文件拷贝到“C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\文件格式”这个文件夹中。

之后再保存的时候就会有ico这个选项了,这样不但可以制作透明样式的网站图标,而且制作出来的ico边缘非常光滑,比在线制作的精美很多。工具准备好了,开始制作。

挑一张喜欢的图片,调整成16×16大小,通过Photoshop保存为favicon.ico。注意,使用ICOFormat插件时,图片大小不能超过256×256,否则保存时还是看不到保存为ico的选项。

之后将制作好的favicon.ico上传到网站的根目录,如果是美国的空间,关闭浏览器后重新打开你的站点就可以看到网站图标了。

如果使用国内主机或者无法看到网站图标,请进行下面的操作

在<head></head>之间加上

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

而动态的网站图标很简单,就是一张GIF动画,同样是16×16大小,上传到网站根目录后,在《head》《/head》之间加下面这一句即可。

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

加上下面的代码会让对方收藏夹中的ICO跟着改变。

<link rel=”Bookmark” href=”favicon.ico” />

到这里如果操作无误,你就会在自己的网址前面看到自己制作的小图标了,如果还是看不到的话,请保证操作正确,清空浏览器的缓存文件,刷新页面就可以看到了。至于动态的网站图标,用火狐访问这个网站就能看到http://2gbhosting.com/

这里需要明确的是,在favicon.ico中,favicon是文件名,ico是扩展名,文件名是可以随意起的,但之所以叫favicon,是因为在国外的主机市场,大多数的主机如果发现根目录里有一个favicon.ico文件的话会自动将其定义为网站的图标,不用修改程序的源代码,我们只要将做好的网站图标文件保存为favicon.ico并上传到网站的根目录即可,很方便。但在国内的主机市场,目前很多还没有这个功能,只能通过修改源代码的方式将favicon.ico加上去。

最后给出一个在线制作网站图标的网站:

http://www.html-kit.com/favicon/

按照提示一步一步操作,最后你可以下载到你所需要的东西,包括ico文件和源码。

地址:

http://www.chami.com/html-kit/services/favicon/

地址:

http://www.chami.com/html-kit/services/

Buddy Icon from Pics //把图片转换成ICO格式,还可制作PNG格式的背景图片

Image Embellisher //制作特殊效果的图片,比如立方体,Windows徽标那样的波浪

原文地址:http://www.ifunkey.com/1121.html 作者:funkey