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

建站经验
网站推广是个持久战 站长要掌握战术技巧
持之以恒的网站推广和日常更新
效果营销 有广告预算不知道用哪些渠道
论坛运营管理经验 防垃圾广告的3种方法
网页页面加载对用户访问的影响
博客网站该如何提升流量
盈利模式 让用户对网站内容买单
网站运营的步骤小结
分类信息网站线下低成本推广方式分析
地方门户网站低推广高回报的思路分析
网站运营战略应该放弃的网站分析
中国网站PR8以上的网站分析
把网站当作自己的孩子 坚持把它养大才能赚钱
网站设计角度分析 提高B2C网站转换率
QQ群推广网站注意的细节问题
闲置的域名该怎么发挥下作用
用虚拟主机做的网站如何迁移
经营一个成功得博客
新手建网站切莫使用低廉服务器(针对做大站的朋友)
BBS型社区运营思路 事件营销是有效的推广方式

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 358 ::
收藏到网摘: 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