怎样制作动画形式FavIcon
FavIcon制作演示
大大小小的网站都有自己的Logo，但是有的网站并不太在意自己的Favicon图标。Favicon图标一般出现在浏览器地址栏和Tab的左边，虽然Favicon对网站SEO没有什么帮助，但是我们不能总是为了SEO而设计网站，那样没准会事倍功半，也比较累。Spider觉得一个好看的Logo或者FavIcon图标可以给人以美好的印象，加深好感，这也算是注重用户体验吧。不多说，开始以本博FavIcon制作过程为例，介绍具体步骤。
- 准备好制作Icon的原始图片。可以是普通的BMP, GIF, ICO, JPG 和 PNG格式，也支持 CUR, EPS, PCX, SVG, TGA 和TIFF等等，功能算是挺强大了。
- 点击此链接打开工具网站。看的出来这个站点页面还是比较简单实用的，这就是国外网站的特点。不妨记住，以后建站风格可以参考。虽然是外文网站，但Spider步骤详细，即使不懂英文，也不影响使用。
- 点击“Image to Use”处“Brouse”按钮，导入步骤1准备好的图片源文件。点击“Generate FavIcon”按钮。很快生成预览样式。如下图所示。
- 该工具网站可以制作动画形式的FavIcon，这样你可以用多个源文件来产生动画效果，Spider在此就用文字替代了。如果想导入多图片，在此点击“Add another image”。文字效果可以点击下图“You favicon preview ”中“edit”或者“Customize”按钮。
- 编辑自定义风格。比如Spider在如上生成的{PIC1}后加入自己的Txt文本，Spider就简单用“SpiderSay”，不用过分追求效果呵呵。还有，一般站长都喜欢把背景设置为透明格式，这也是很多人到处寻找、经常求教的问题，很简单，只需要将背景设置为“transparent”。OK？
- 找到“Add icon format”点击16×16，这个大小一般是比较合适的。好了，马上你就看到了效果。在随后出现的预览图中，预览你的动画效果。可以把其他结果都“Remove”即删掉。
- 最重要一步“To add this favicon to your site”，即上传该效果至网站。“Download”下载文件包，解压后FTP上传至网站根目录。然后注意将如下一段代码加入到head标签之间，对于WordPress用户，当然放在header.php里就OK了。
<link rel=”shortcut icon” href=”favicon.ico”>
<link rel=”icon” type=”image/gif” href=”animated_favicon1.gif”>
最后一步，欣赏下是否成功了！
最新评论