网站图标及动态网站图标实现

细心地人会发现,有些网站的小图标是不是很漂亮并且有的还会动,是不是很漂亮?让我来告诉大家把

制作网站图标

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

虽然现在有很多在线制作网站图标的网站,但制作出来的图标实在是差强人意,而且不支持透明样式的ico,这很不爽,而为一个小小的文件再装个专业 的ico制作工具又有点浪费,其实用PS就可以很方便的制作出漂亮的ico文件。

我们知道Photoshop是无法保存ico格式的文件 的。

怎么办呢,下载个ICOFormat,下载以后将解压出来的文件拷贝到PS目录的插件(Plug-ins)中的文件格式(File Formats)文件夹中。

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

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

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

如果你的主机国内的或者是看不到图标,那你就在<head></head>之间加上

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

而动态的网站图标很简单,就是一张GIF动画,同样是16×16大小,上传到网站根目录后,在<head></head>之间介入以下代码。

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

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

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

到这里如果操作无误,你就会在自己的网址前面看到自己制作的小图标了,如果还是看不到的话,请保证操作正确,清空浏览器的缓存文件,刷新页面就可以看到了。

 

0 thoughts on “网站图标及动态网站图标实现
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。