编译:四眼天兔 原文出处:http://www.photoshopsupport.com
Favicon是出现在浏览器地址栏网址前面的那个很小的图像标记。同时，它还会出现在你的收藏夹里面，出现在你的分页浏览标签上。之所以说它只是个很小的图像标记，因为它只有16X16像素那么大。如果你喜欢进行一些极具挑战的设计创作，那么试着来亲手做一个这样的图像标记吧。
通常你所需要添加到你网站上的Favicon是一个Windows Icon(.icon)文件，它是位于你的网站根目录下面的名为favicon.icon文件。现在，除了IE浏览器，其他多数浏览器能够用GIF和PNG格式来代替.icon格式。不过，既然包括IE在内的浏览器全都能够识别.icon格式，并且此格式具有很多GIF和PNG不具备的特性，就请饶有兴趣地往下继续阅读如何制作一个.icon文件吧。
制作方法：
STEP1:下载一个插件
你需要一个制作.icon格式的PS插件来输出.icon文件格式。你可以从Telegraphics下载。这个插件可以读写1，4，8位索引格式和24位RGB格式，并且可以读写32位XP系统的icon格式。请确认你在开始以下教程的之前安装了该插件。
STEP2:开始制作
因为16X16是如此小的一块画布，因此非常难于创作。为此，我们先创建一个64X64（通常使用16的偶数倍）的画布来代替16X16。
STEP3:设计
如果你已经做好了一个LOGO，那么将该LOGO的大小调整为16X16像素。如果调整完以后看上去不是很满意，那么就在你刚刚创建的64X64的画布上，根据你的网站风格，从新设计一个简单的样式。
当你做好以后，选择Image>Image Size（图像>图像大小）菜单，在里面输入16X16像素，确认图像是否清晰，如果不清晰的话返回从新设计，直到满意为止。
STEP4:保存icon格式
打开File>Save As（文件>另存为），确认你所起的文件的名字是favicon.ico。在此格式下，你必须从下拉菜单中选择Windows Icon(ICON)格式。该格式选项只有你下载并安装了前面提到的那个插件才会出现。
接下来，你需要将你新作的这个文件上传到你的网站的根目录下面。
STEP5:上传Favicon.ico文件
连接你的主机服务器，将Favicon.ico文件上传到你的网站。你必须将此文件和你网站的index.html文件放在同一个目录下，一定确认不要放到图像文件目录下或者其他目录下。通常的位置是在你的网站的”root”文件夹里，它和你的index.html在同一个目录下。这样一来，大多数浏览器就可以自动搜索到Favicon.ico文件。
有些浏览器会通过HTML代码来查找你的Favicon.ico文件。你可以通过在每个网页上添加一个链接语句来帮助这些浏览器查找Favicon.ico文件。
这是链接代码：<link rel="Shortcut Icon" href="/favicon.ico">
一旦你添加了这个语句，记得从新上传你更改过的页面文件。
（有些人建议用下面的语句更为准确：<link rel="icon" href="/favicon.ico" type="image/x-icon">，当然，你可以选择你自己喜欢的，两个都是可以的。）
如果你想使用GIF或者PNG格式的图标代替ICO格式图标，就需要使用下面的链接语句来代替上面所写的那段语句（切记，IE不支持这两个格式）：
STEP6:测试
如果你的Favicon没有立刻出现在浏览器上，尝试刷新页面或者清除页面缓存。又或者在url的末尾加上”?”，这样，浏览器就会默认网页是最新的以及没有缓存的。
问题解决
浏览器问题：
IE6不会自动显示Favicon文件，除非你将该网址添加到收藏夹它才会显示。或者你可以尝试这样一个秒招：在地址栏上找一个已经显示出来的Favicon（是自身显示出来的，而非你通过添加收藏显示出来的），然后轻轻转动它然后松开。这样网页就会从新下载，你的新的Favicon就会出现了。
Safari浏览器不会自动显示更新过的favicon ,你必须将缓存清除以后才会显示。
Firefox需要清除缓存并且从新开启浏览器。Opera只需要刷新即可。
文件格式不支持：你必须下载ico格式插件并从起photoshop才会出现Windows Icon (ICO) 格式选项。
博文
没有评论:
发表评论