favicon.ico是”Favorite Icon”的缩写,favicon.ico和网站Logo属于常见的网站标识。
通过设置favicion.ico,可以在如下三个位置标识网站。
1.浏览器地址栏中当前浏览网址前方图标,拖拽此图标到桌面可以生成快捷方式。
2.多标签浏览器的页面标签最前方
3.如果对网站进行收藏,收藏夹中收藏名称前图标标识
一个醒目独特的favicon.ico可以通过这三个位置,在Logo之外非常显著的告知用户目前所访问的网站是哪个网站,同时也便于用户在收藏夹中快速寻找到收藏过的网站。
二、如何制作favicon.ico
不论通过何种方法,首先都需要你制作好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.透明和不透明的区别
直观对比效果如下,在本文开始提到的三个位置可以见到明显区别。
不透明:
透明:
三、如何添加favicon.ico到网站
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没有研究过,有兴趣的朋友可以研究一下。
(完)