favicon.ico文件简介

本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到):

675542-20160101230459323-1855414048.png

favicon.ico 是啥?看下面这张图就知道了。

675542-20160101230648604-776272409.png

favicon 是 favourite icon 的简称,亦被称为 website icon(网页图标)、page icon(页面图标)或urlicon(URL图标)。一个网页的 favicon.ico 通常可以在浏览器地址栏、标签栏,或者被保存为书签后可见,设置一个个性化的 icon 是不是很酷呢?

给一个网页设置 favicon.ico 有两种方式。

  • 方法一(推荐):

    将 favicon.ico 文件放置在服务器根目录下。

    通常来说一个网站的网页,其 favicon.ico 只有一个,所以这也是最普遍的做法,比如 百度Google 等等。打开该域名下的网页,会自动去根目录寻找 favicon.ico 文件。

    二级域名呢?如果有必要,可以为二级域名单独设置 favicon.ico,比如 http://m.baidu.com/favicon.ico,它和 http://www.baidu.com/favicon.ico 是不同的文件,如果 m.baidu.com 中没有设置,会自动使用顶级域名下的 icon。

  • 方法二:

    可以在具体网页中设置,优先级高于方法一

    设置方式相当简单,通常在 head 元素后新增个 link 标签即可,将其 href 属性指向图片地址。通常我们使用 ico 格式的图片,16*16(best) 或者 32*32 等,不过近来各种高级浏览器也支持 png 格式甚至 gif 格式的图片了。

      <link rel="shortcut icon" href="cat.ico" /> 

再回到文章开头的问题,如何处理这个 404 的错误?最简单的方式无非是给根目录加个 icon 文件了,如果不需要显示具体的,可以用一个空白的 ico 文件,美其名曰 "blank favicon file"。其他方法可以参考 How to prevent favicon.ico requests?

如何得到一个 ico 文件?推荐两个网站,easyicon 以及 iconfinder,后者更全不过不少 icon 都要收费。当然,你完全可以自己搞个 png 文件转换格式,http://www.favicon-icon-generator.com/http://www.atool.org/ico.php 是值得推荐的。

最后再介绍一个用于获取网站 favicon.ico 文件的 url。http://www.google.com/s2/favicons?domain=url。比如需要获取博客园的,可以打开 http://www.google.com/s2/favicons?domain=http://www.cnblogs.com

Read More:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值