最新消息:嗨,新朋友,很高兴认识你,欢迎来到我的博客。更好的阅览效果,请用Firefox,Chrome,Opera等浏览器.

给你的网站添加小图标(favicon.ico)

为什么网站要有小图标

如果一个网站没有小图标 favicon.ico .那么使用Firefox ,Chrome, Opera ,IE9以上的浏览器访问你的网站就不会显示下面这样的小图标.

当然没有这个文件时,在火狐浏览器下就会显示虚线方块的图标,几乎不能辨认.ie6就另说了,现在只在使用梯子时,梯子默认才打开IE,好像我的IE6升级了,升级到8,你知道我是用的XP,这个版本是最后的版本了.但也不经常用,偶尔使用网银时用用.

如果非要加个理由. 我认为网站没有小图标就像一个人没有姓一样,一个人没有姓,只有名,让人感觉就是非常怪怪的.

实现目标的步骤:

如果你想拥有这个的效果,第一步制作favicon.ico文件

工欲善其事,必先利其器. 古语说的好呀,你没有合适的制作工具,随笔的一个favicon.ico,你能满意.好吧如果,你使用wordpress,程序默认会带一个这样的文件.如果你不在意这些,其事也不错.如果你想我这样折腾,那么就开始动手吧.

在线favicon.ico文件生成地址

这些比较简单,使用捷径:

这些实在是太多了,看个人爱好了,排名不分先后.

进阶ICO生成

这是百度一款app,功能可以满足大部分要求,并且所见即所得.简直牛掰了

将生成的文件保存为favicon.ico

不要保存为其他文件名.如果要保存为其他文件名请移步到后面进阶步骤.注意图标大小是16X16.我们建议你也使用这个大小以及ico这种格式,其他大小或者其他格式,需要添加特定代码才能显示.

将生成的favicon.ico上传到网站根目录.

这个其实没有什么介绍的.使用工具我推荐使用filezilla开源强悍,支持ssh上传. 其他flashFTP,等其他一些ftp上传工具都可以.

我不想折腾怎么办?

没关系,wordpress有一个Shockingly Simple Favicon插件. 进入你的WordPress博客管理员后台:

1)点击“插件-添加新插件”;

2)输入“Shockingly Simple Favicon”搜索插件;

3)安装并激活该插件

4)上传一个 favicon至博客的根目录

5) OK

网站根目录.不用解释吧.wordpress可以上传到主题文件夹目录,这时需要在head标签之间添加代码.通常这时firefox,chrome,opera浏览器就可以显示小图标了.

为了使大部分浏览器正常显示需要在在head标签之间添加代码

<link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">  
<link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon"> 
	

刷新浏览器的缓存

可以通过快捷键Ctrl+F5强制浏览器刷新缓存.这时网站图标就可以显示出来了.

进阶.让浏览器显示动画图标

这个其实也很简单.这时要用一些专业的工具GIMP,photoshop等工具制作GIF文件了.大小也是16×16.

将生成的文件名命名为favicon.gif ,然后将这个文件上传到网站根目录.再在head标签内添加如下代码:

<link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">  
<link rel="shortcut icon" href="/favicon.gif" mce_href="/favicon.gif" type="image/gif"> 
	

注意将vgg.meg改为你的网站.这时firefox ,chrome ,opera等浏览器就可以看到动画图标了 ,IE就无能为力了.

一些题外话

  • 网站图标名字不一定是favicon.ico,通常为了规范起见,我们这样做如果是其他名字,请注意将代码中的favicon.ico改成相应的文件名.
  • favicon.ico 不一定放到网站根目录.通常这么做也是规范起见.如果放到别处,请注意在代码中更改该文件的路径.
  • favicon.ico图标不一定是ico格式,但是只要IE才只识别这种格式,firefox,chrome,opera可以识别PNG,GIF,JPG等格式.
  • 图标大小不一定是16×16,可以是32×32,当然显示出来还是16×16的,不过是缩放后的效果,为了不是缩放变形.我们使用默认的16×16格式.
  • 图标动画也可以使用png的扩展apng格式.这种格式,图标更清晰.
  • 无论使用什么样的格式,什么养的动画,请注意在代码中正确表达图标格式,路径.
 移动设备二维码阅读
┃文章档案信息:
┃本站文章除注明转载外,均为本站原创或编译
┃欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果,共创美好博客家园.
┃声明: 本文采用 BY-NC-SA ( 署名,非商业性使用,相同方式共享 )协议进行授权
┃转载请注明:转载来源自: 互联网新鲜事
┃本文标题: 给你的网站添加小图标(favicon.ico)
┃本文网址: http://www.vgg.me/internet/add-to-your-site-small-icon-favicon-ico/
友荐云推荐

与本文相关文章