利立德网络创业联盟 >> 网站基础知识 >> 网站收藏图标Favicon的制作使用

网站收藏图标Favicon的制作使用

利立德网络创业联盟 ninso.cn 阿飞 2007-12-5 21:50:32

网站个性标志Favicon的使用

　　从严格意义上，favicon之话题无关SEO技术，也与Web服务器技术方面之讨论没有太大干系，不过，在我们之网站建设中，为网站打造一个契合网站主题之个性化标志则是必需之，这直接关系到能否成功之塑造网站之品牌。这从某些角度看仍在网站推广之范畴之内，而欲取得成功，不仅包括良好之页面设计、令人印象深刻之网站Logo，也包括favicon。

　　什么是favicon？

　　所谓favicon，即Favorites Icon之缩写，顾名思义，便是其可以让浏览器之收藏夹中除显示相应之标题外，还以图标之方式区别不同之网站。当然，这不仅仅是Favicon之全部，根据浏览器之不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在之址栏上，这时用户可以拖曳favicon到桌面以建立到网站之快捷方式；除此之外，标签式浏览器甚至还有不少扩展之功能，如FireFox甚至支持动画格式之favicon等。

　　从特定之技术角度看，favicon也并不只是仅仅让网站给人更专业之观感，也可以在一定程度上减轻服务器之流量带宽占用：一般为了提高网站之可用性，我们都会为自己之网站创建一个自定义之404错误文件，在这种情况下，如果网站没有相应之favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义之404文件，并在网站之错误日志中记录。这显然是应该予以避免之。

　　如何制作Favicon.ico

　　制作Favicon.ico之方法相当简单，首先，利用图形工具创建2个反映网站主题之256色之小图片：1个为32×32像素，另一个为16 ×16像素。需要注意之是，调色板要选用“Windows 默认调色板”，不然，在最终之效果展示中图形可能会发生迥异于您初衷之颜色上变化。

　　需要说明之是，在很多关于Favicon.ico之说明中，常见到要求图片为16色之说法，应该说这类说法大大过时：在早期如Windows 95时期，16色之Favicon.ico可能是个稳妥之选择，保证其在大多数情况下正常使用，但现在，完全不存在那类限制，16色只能使图标之展示效果大大降低。

　　至于在浏览器中使用时16×16像素之图片已经足够，为什么还要准备32×32像素之图片，原因在于，正如上文所言，favicon也显示在之址栏中，用户可以拖曳favicon到桌面以建立到网站之快捷方式，而桌面图标则要以32×32显示之，如果您之Favicon.ico不包括32像素之图片，系统就只能使用默认之浏览器图标来标注网站/网页，如Internet Explorer之蓝色“e”，起不到我们意欲通过Favicon.ico打造网站品牌之作用。

　　图片制作好后，使用如Image2Ico之类之小程序即可将2张图片转换到一个Icon文件中。也可以通过可以在线制作Favicon之网站来制作，不过，需要注意之是，这个网站要求图片源文件格式为Pic。

　　在网页中使用Favicon.ico

　　浏览器调用Favicon之原则是首先在网页所在之目录下寻找Favicon.ico文件，如果没有，便到网站之根目录下寻找。

　　因此，在网页中使用Favicon最简单之办法便是将制作好之图标文件命名为Favicon.ico，然后将其上传到网站之根目录即可。

　　如果您需要将Favicon.ico放到其他目录下，或者希望让不同之网页显示不同之Favicon，就需要在网页Html文件中做设定了，具体设置也很简单，在Html中之＜head＞部分加入如下之代码：

　　程序代码:

　　Firefox还支持GIF动画格式之Favicon,使用方法如下:

　　首先制作一个16*16之gif动画,然后在html代码<head></head>中加入如下代码:

　　程序代码

责任编辑: 阿飞参与评论

相关文章: 404错误页面的创意设计[12-05]; iconka工作室图标设计作品欣赏[12-05]; 餐饮娱乐设计门户网站运营推广方..[11-26]; 做网站不要钻DIV+CSS的牛角尖[11-16]; 用超级巡警批量清除被挂马的网页[08-13]; 用FrontPage制作缩略图图片网页的..[06-28]

最新文章: 404错误页面的创意设计[12-05]; iconka工作室图标设计作品欣赏[12-05]; CMS全接触：Kingcms系统资料大全[11-30]; CMS全接触：NBarticle文章系统资..[11-30]; CMS全接触：乔客joekoe cms v4.0..[11-30]; CMS全接触：jtbc（cms）系统资料..[11-30]