十一月 10th, 2009

Favicon:网站特色小图标

网站开发, by 陈威.

     在浏览Sina、Sohu等知名网站时,我们会发现浏览器的地址栏和多标签浏览器的标签栏上都有一个非常醒目的小图标。以新浪网为例,在地址栏和标签栏中的小图标如下所示:

新浪网地址栏

新浪标签栏

 

     这就是被称为favicon的小图标。Favicon是favorite icon的简称,也被称为wesite icon、page icon或url icon,一个好的favicon能够体现出网站的特色或内容。最早是用于Internet Explorer中的收藏夹功能,但目前的浏览器都支持这一功能,并且浏览器可以把favicon显示在浏览器的地址栏、标签式浏览界面的页标题前以及书签列表的网站名前。虽然它只是个不起眼的小家伙,但它却可以在地址栏、书签列表和标签栏中出现展示网站的logo或其他信息,为用户提供更好的浏览体验。

     最初将favicon展示到浏览器界面的方法是将一个名的”favicon.ico”的文件放到Web服务器的根目录下,Internet Explorer的收藏夹功能会自动识别该文件并显示,但后来出现了一种更为灵活的方法,通过HTML代码来为网站指定网站的favicon的存储位置。这种方法是通过在页面的<head></head>标签中加入link元件来实现的,添加favicon的代码如下:

<head>

<link rel=”shortcut icon” href=”/directory in which you put the favicon/favicon.ico” type=”image/x-icon” />

</head>

     在“威言大义”网站中,我也尝试着去实现这样一个小功能。在网上有很多在线生成ico文件的站点,只需要将本地生成的jpg或其他格式的文件上传即可在线生成标准的icon文件。ico文件的尺寸一般为16*16 pixel或才32*32 pixel,色彩为256色。在制作我的网站favicon时我使用了”FavIcon from Pics”网站的在线生成favicon服务。下面就是我的网站小图标的原图:

favicon原图

     将生成的ico文件放到指定目录下并调整页面代码后,favicon小图标功能在FireFox(3.5.5版本)中正常运行:

firefox faviconfirefox favicon1

 

     在使用IE内核(IE 8)的世界之窗浏览器中也能够显示出相应的favicon:

世界之窗浏览器

 

     但在sogou浏览器中却不能正常运行。目前我正在调试中,读者如果有好的方法或经验也请不吝赐教。

Back Top

Putty登录后Vim中文乱码问题 钱学森之问:有感于学术研究

Responses to “Favicon:网站特色小图标”

  1. 常来看看哈

  2. 师兄也有网站啦,还挺不错的,加油加油:)

  1. 没有任何引用。

发表回复

Back Top

*
To prove you're a person (not a spam script), type the security text shown in the picture. Click here to regenerate some new text.
Click to hear an audio file of the anti-spam word