制作网站浏览器地址栏图标及网站图标实现教程
作者：funkey 来源：asp之家 发布时间：2010-03-23 09:14:00
有人也许会好奇，有的网址前面有个漂亮的小图标而且有的网站图标还会动，这是怎么做的呢？
那个小图标有个名字叫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上传到网站的根目录，如果是美国的空间，关闭浏览器后重新打开你的站点就可以看到网站图标了。
如果使用国内主机或者无法看到网站图标，请进行下面的操作
在之间加上
而动态的网站图标很简单，就是一张GIF动画，同样是16×16大小，上传到网站根目录后，在《head》《/head》之间加下面这一句即可。
加上下面的代码会让对方收藏夹中的ICO跟着改变。
到这里如果操作无误，你就会在自己的网址前面看到自己制作的小图标了，如果还是看不到的话，请保证操作正确，清空浏览器的缓存文件，刷新页面就可以看到了。至于动态的网站图标，用火狐访问这个网站就能看到
这里需要明确的是，在favicon.ico中，favicon是文件名，ico是扩展名，文件名是可以随意起的，但之所以叫favicon，是因为在国外的主机市场，大多数的主机如果发现根目录里有一个favicon.ico文件的话会自动将其定义为网站的图标，不用修改程序的源代码，我们只要将做好的网站图标文件保存为favicon.ico并上传到网站的根目录即可，很方便。但在国内的主机市场，目前很多还没有这个功能，只能通过修改源代码的方式将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
0
投稿猜你喜欢
制作好的最终效果可能很多人觉得这个实例是很简单的~~其实也确实不难，应该算是新手入门教程。不过本例在细节上处理的很到位。大家可以学习他制作的- 首先是调色，选择一些比较颓废的色调。后期就是画面的装饰和色彩的渲染，这一步处理起来比较麻烦，作者没有详细介绍。需要自己下载一些纹理笔刷，并根
- 先看一下最终效果：开始制作：新建图层，画出苹果的形状，不用太圆，苹果本来就是不规则的。设置图层样式里的渐变，如图画完效果如下ctrl+j复制
- 高光是体现质感的重要一环，高光包括物体表面对光的线状、点状或者面状的反射。正确的高光处理首先要确定光源的位置，这一点很重要，根据光源位置和光
- 本教程主要是利用一些滤镜效果来制作底纹效果，然后通过图层叠加等应用到图层上用来做背景。再稍微调整下人物即可。原图最终效果1、打开原图，创建曲
- 本教程介绍艳丽的潮流海报制作效果。这类海报制作相当有个性，不受任何限制，可以尽情的发挥想象去制作，笔刷及纹理素材可以任意添加。（文/Sunn
- 先看最终效果开始制作1、新建800*600画布！白色背景。新建图层，使用渐变色填充图层！我们先用黄色到红色的渐变色，设置如下。然后将这个图层
- 这节所有说并不只是单指头发，毛发是指头发，还有眉毛、睫毛等都包括在内。毛发所要表现的不仅仅是它的青丝感，还要有层次感和明暗。教程方法如图：在
- 网格设计呢，通常显得很整齐规范，有时看上去也比较专业。但网格设计相对来说也是比较复杂的，往往需要精准的测量和栏目划分。960 Grid Sy
- 从原图可以看出，照片质量不是很理想，人物有很多杂色而且曝光不是很均匀。处理的时候先要给人物磨好皮，再换背景。处理细节的时候一定要有耐心。原图
- 看到会员xinye在论坛贴了张华硕液晶屏幕的产品效果图，求教图片背景的五彩光线迸发的效果是怎么达成的。就我眼光看来，原图多半是Photosh
- 本教程色调调得不错。仅利用几个调色工具快速调出效果，可见作者对色彩把握的非常好。原图最终效果1、打开原图素材，双击色彩平衡调整图层，参数设置
- 我们将教大家使用photoshop为字体添加一个烟雾弥蒙的诡异效果，整个制作过程非常简单，你只需付出5-10分钟的时间便可掌握，长话短说，我
- 薛欣 xuexin@126.com 转载请注明出处说实话，Photoshop能混
- 本教程过程图及介绍步骤有点少，对于初学者来说可能有点难度。不过鼠绘是非常讲究细节的，绘制的时候一定要有耐心，可以参考作者的效果慢慢去绘制。最
- 本教程介绍耳机的制作方法。制作的时候重点介绍其中一部分的制作过程，其它部分基本原理一样。先勾出图形填充颜色后再调光感。 最终效果1 最终效
- 在我们的视觉设计中经常会需要一些3D的字体效果或是3D的图形化icon。是不是翻遍很多网站苦于没有找到自己想要的角度或则是图形呢，找到了又要
- 本教程介绍较大的人物头像的磨皮及调色方法。因为照片较大，人物脸上有很多斑点及色块。普通的磨皮方法可能脸上有很多细节会丢失。作者用的是同道选区
- 本教程主要是利用画笔来制作绚丽的光影效果，制作的时候画笔的设计比较重要。很多特殊的效果都可以用画笔来制作，把做好的图形再配上图层样式，效果更
- 如果看过winamp的AVS的弦曲线的人想必对其华丽的光影效果印象深刻。 这次我创作了这个桌面，希望能抛砖引玉，让大家发掘firework的
