在我们的网站建设中，为网站打造一个契合网站主题的个性化标志则是必需的，这直接关系到能否成功地塑造网站的品牌。这从某些角度看仍在网站推广的范畴之内，而欲取得成功，不仅包括良好的页面设计、令人印象深刻的网站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的地址：
http://www.chami.com/html-kit/services/favicon/
在网页中使用Favicon.ico
浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件，如果没有，便到网站的根目录下寻找。
因此，在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico，然后将其上传到网站的根目录即可。
如果您需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，就需要在网页Html文件中做设定了，具体设置也很简单，在Html中的＜head＞部分加入如下的代码：
程序代码: <link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
Firefox还支持GIF动画格式的Favicon,使用方法如下:
首先制作一个16*16的gif动画,然后在html代码<head></head>中加入如下代码:
程序代码 <link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >
-------------------------------------------------------------------------- 什么是网站 ICO 图标？
当我们打开新浪、网易、阿里巴巴等网站时，会在地址栏看到一个很有个性的小图标，即网站的ICO图标（图一），是Favorites Icon的缩写，根据所使用的浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，Favicon不仅在收藏夹中显示（图二），还会同时出现在地址栏上，这时用户可以拖曳Favicon到桌面以建立到网站的快捷方式（图三）；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的Favicon等。
网站 ICO 图标的作用：
网站 ICO 图标能给人一种更专业的观感，打造一个契合网站主题的个性化标志, 这直接关系到能否成功地塑造网站的品牌。
网站 ICO 图标的制作：
制作ICO 图标的方法有以下三种，首先，利用图形工具创建1个反映网站主题的256色的小图片：通常情况下有以下三种规格16×16像素、32×32像素、48×48像素，也可以根据实际情况设定（拖曳Favicon到桌面以建立到网站的快捷方式，而桌面图标则要以32×32显示，如果您的Favicon.ico不包括32像素的图片，系统就只能使用默认的浏览器图标来标注网站/网页），在VISITA下最大支持256×256像素。特别需要注意的是，调色板要选用“Windows 默认调色板”，不然，在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化。
一、使用Photoshop制作
使用Photoshop制作ICO图像，首先必须保证Photoshop下具有制作ICO图标的增效插件，可以通过两种方法查看
（1）、打开Photoshop软件，然后打开一副图像，将图像另存为，在格式选项中是否有“ICO (Windows Icon)(*ICO)”项。（图四）
注意：打开的图像必须在255×255像素，文件格式必须是RGB类型，否则不能显示支持格式类型。
（2）、打开Photoshop安装文件夹，查看是否有增强ICO插件文件，路径：D:\Program Files\Adobe\Photoshop CS\增效工具\文件格式（图五）
注意：根据自己具体安装路径查看。
如果没有此增强ICO插件，可以在“附件一”下载，然后粘贴到该文件夹下，重新启动Photoshop程序。
制作过程：
（1）、用Photoshop 制作一个ICO的原图，格式可以是 jpg / jpeg / gif / png 等，大小大概在 32×32 像素差不多，但必须控制在 255px×255px 之间，最好是16×16 像素，因为浏览器标题栏和地址栏上显示的就是这个尺寸。但是我们在把Favicon拖曳到桌面以建立到网站的快捷方式时，而桌面图标则要以32×32显示，这时候我没就可以用Image2Ico将，大小不同的两张ICO图标合成到一个图标上，最后我们单独来讲解如何制作。
（2）、我们将制作好的原图另存为.Ico格式，前提是必须有增强ICO增效格式的支持，即安装了此增效工具。
二、使用专用工具Axialis IconWorkshop制作
这里我们使用专业制作软件Axialis IconWorkshop来制作，
制作过程：
（1）、下载安装Axialis IconWorkshop v6.11软件。（附件二提供下载）
（2）、运行软件出现软件界面警告：缺少组建（图六）
如果你电脑缺少需要的组建，可以直接下载，如果在实际应用中用不到此组建，点选“以后再提示”。（图七）
如果要在线注册，可以选择“立即注册”进行注册，本地注册，输入一个公司名称和注册码（公司名可任意输入，注册码压缩包中自带）（图八）
点选“以后再提示”，进入页面的界面如（图九）
（3）、进入软件界面以后可以在背景光度调节窗口下调节背景亮度，在工具栏选择相应的工具， 在颜色调板选择相应的颜色，在工作区域进行点描。（图十）
也可以在菜单窗口打开相应的ICO图标进行必要的修改。
（4）、在制作完成之后，点击菜单栏“文件”—“保存”或“另存为”。（图十一）
此时，使用专用工具Axialis IconWorkshop制作ICO图标完成，Axialis IconWorkshop软件还有很多有趣的用法，大家自己来研究研究。
三、在线生成ICO 图标
因为ICO格式图片比较特殊，一般软件（如 Windows 自带的画图、Adobe Photoshop 等）都制作不了，我们就分两步制作。
（1）、用 Windows 自带的画图或 Adobe Photoshop 制作一个ICO的原图，格式可以是 jpg / jpeg / gif / png 等，大小大概在 32×32 像素差不多，最好是 16px×16px 的，因为浏览器标题栏和地址栏上显示的就是这个尺寸。
（2）、将制作好的ICO原图转换为ICO 格式，制作好后可以在线转换 ico 格式的网站这里推荐 http://www.bitbug.net/或者http://www.favicon.com ，打开该网站后界面很清晰明了，经数秒简单的提交处理即可转换为我们要的 ico 格式图标文件，文件被自动命名为 favicon.ico。(图十二、在线制作截图)
到此在线制作完成。
在网页中使用ICO图标：
在网页中使用ICO图标是将制作好的图标文件命名为Favicon.ico，然后将其上传到网站的根目录即可。
在网站源代码中将以下两行代码添加到Html中的＜head＞部分，（如图十三）
如果您需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，就需要在网页Html文件中做设定了，具体设置也很简单，在Html中的＜head＞部分加入如下的代码：
程序代码: <link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
Firefox还支持GIF动画格式的Favicon,使用方法如下:
首先制作一个16*16的gif动画,然后在html代码<head></head>中加入如下代码:
程序代码 <link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >
检验成果
以上工作都做好后就可以检验自己的劳动成果了，首先您需要做的就是把Internet临时文件夹、Cookie、历史记录清除，打开你的网站，看看地址栏的左边是不是出现了你制作的ICO图标呢？然后把自己的页面收藏一下，在看看收藏夹中的ICO图标，还不够过瘾的话，再我地址栏的ICO图标拖拽到桌面上，这样以后访问我们自己的站点是不是很方便了。
用Image2Ico合成不同大小的ICO图标
最后我们还有一个问题，就是用Image2Ico小程序将一个16×16像素的ICO图标和一个32×32像素的ICO图标合成在一起，当然可以根据自己的需要设置不同的尺寸。设置的最大尺寸不能大于128×128像素。
（1）、下载软件Image2Ico（附件三）。
（2）、打开软件，出现如下界面。（图十四）
从图中我们可以看到，虽然是英文版面，但是是一个很简单的软件，文件菜单（File）中有新建、打开、保存、推出选项，第二个菜单项是插入，然后是移动、工具（主要是旋转和倒置）、文件大小、帮助。然后下面的工作区域是大小和颜色模式。
注意：在Image2Ico中只能插入合成ICO图标，不支持别的图像格式。
（3）、这里我们选择256颜色模式，合成一个16×16像素的图标和一个32×32像素的图标，分别点选16×16像素和32×32像素的方框，分别插入相应规格的ICO图标。（图十五）
（4）、保存。在插入相应的ICO图标后，调整好图标的方向，可以点File保存合成的ICO图标。
（5）、16×16像素的图标和32×32像素ICO图标合成完成。
|
