设为首页 - 加入收藏
热搜: 网销 电子商务
广告位
当前位置: 网销中国 > 网络运营 > 网页设计 >

网站浏览器地址栏里的那个网站图标怎么做?

2011-12-30 22:30 [网页设计] 来源于:网络
导读:浏览不同网页时会注意到浏览器地址栏里有个漂亮的小图标,而且有的网站图标还会动,这是如何做出来的呢? 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将你的网站放入收藏夹之后,网站图标的作用就出来了,它可

        浏览不同网页时会注意到浏览器地址栏里有个漂亮的小图标,而且有的网站图标还会动,这是如何做出来的呢?

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

方法一:

第一步,准备一个图标制作软件。     

首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以   .ico   作为扩展名。普通的图像设计软件无法使用这种格式,所以您需要到一个软件下载站点去下载一个图标制作软件。您也可以访问 http://www.favicon.com/  ,这里提供一个免费的在线“收藏夹”图标生成器,如果您   E   文够好的话,在这里您还可以了解到更多的关于“收藏夹”图标的知识。     

第二步,确定“收藏夹”图标的规格。     

“收藏夹”图标有着它特有的规格:图标的大小为   16   *   16(以像素为单位);所使用的颜色不得超过   16   色。     

第三步,设计一个属于您自己的图标。     

       您可以将您的网站的   LOGO   做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之,它一定要是属于您自己的,并且能很好的代表您的网站的风格和个性。然后将这个图标文件命名为:favicon.ico。     

       最后,将这个图标文件(favicon.ico)上传到您的网站所在的服务器的根目录下。您不需要对您的网页文件作任何的修改,IE5   会自动的不停的搜索您的网站的根目录,只要它一发现了   favicon.ico   这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了。     

方法二: 
      <HEAD>  
      <LINK   REL="SHORTCUT   ICON"   HREF="http://网站地址/favicon.ico">  
      <TITLE>My   Title</TITLE>  
      </HEAD>  
       使用这个做法的话,  
       就不一定要把图形文件放在网站的根目录下面了,  
       你可以放在任何位置,  
       甚至直接连结到其他网站上面的图形文件也可以,  
       而且图形文件的文件名也不一定要叫做   favicon.ico,  
       可以自己随便取。  
       不过要注意的是使用这个做法的话,   
       只有在把有加入上面HTML语法的页面加入书签的时候才会有作用。

方法三:

       虽然现在有很多在线制作网站图标的网站,但制作出来的图标实在是差强人意,而且不支持透明样式的ico,而为一个小小的文件再装个专业的ico制作工具又有点浪费,其实用Photoshop就可以很方便的制作出漂亮的ico文件。小马识途(www.newssem.com)团队告诉大家用如何操作:

       我们知道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加上去。

(编辑:网销中国)

相关内容
网友评论
推荐文章