[资料]favicon.ico制作方法

favicon.ico是”Favorite Icon”的缩写，favicon.ico和网站Logo属于常见的网站标识。

通过设置favicion.ico，可以在如下三个位置标识网站。

1.浏览器地址栏中当前浏览网址前方图标，拖拽此图标到桌面可以生成快捷方式。

2.多标签浏览器的页面标签最前方

3.如果对网站进行收藏，收藏夹中收藏名称前图标标识

一个醒目独特的favicon.ico可以通过这三个位置，在Logo之外非常显著的告知用户目前所访问的网站是哪个网站,同时也便于用户在收藏夹中快速寻找到收藏过的网站。

不论通过何种方法，首先都需要你制作好favicion.ico的源图(一般取自Logo或和Logo一致)，正方形，不小于16像素x16像素,建议制作时可以选择适当大一些的图，例如128×128，最后在转换时再考虑缩小。

当制作好源图后，有如下两种较为简单的方法可供制作，除了这两种方法外还有其他的方法，也有其他工具和网站可以提供制作功能，读者可以根据需要选择最适合自己的:

1.在线制作:

a. FavIcon from Pics — favicon_ico for your website (不支持透明效果，自动缩放，可以在线预览)

b.Dynamic Drive- FavIcon Generator (支持透明效果,自动缩放)

2.Photoshop制作

photoshop默认是不支持ico格式的，可以在下面下载”ICOFormat.8bi”文件，放入Photoshop的安装目录下”Plug-ins\File Formats”目录下。

此时在photoshop的”另存为”的格式中就会出现”.ICO”格式，支持透明效果，如果没有，重新启动下photoshop。

重点提醒：保存为ICO格式前记得修改大小到16像素x16像素，Photoshop不会自动缩放到标准网站favicion.ico的大小。

3.透明和不透明的区别

直观对比效果如下，在本文开始提到的三个位置可以见到明显区别。

不透明:

透明:

1、将favicion.ico放到网站根目录下

2、在网页的<head></head>间添加如下两行
<link rel=”Shortcut Icon” href=”favicon.ico”>
<link rel=”Bookmark” href=”favicon.ico”>

至此已经完成了添加工作，不过根据观察，更新后马上访问浏览器没有立刻更新，对于firefox，盆地通过直接访问http://www.penddy.com/favicon.ico来进行更新，对于IE没有研究过，有兴趣的朋友可以研究一下。

(完)

标签: favicon
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

3,790次阅读 | penddy on 2008-12-2 14:57 | File Under 互联网 | 1 Comment -

盆地观察