favicon.ico文件简介

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

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

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:

  • 关于favicon.ico的两三事
  • favicon.ico Wiki
  • Useless favicon.ico 404 messages in logs
  • HOW A BAD FAVICON.ICO CAN CAUSE A LOT OF TROUBLE
  • How To Give Your Site A Favorite Icon
  • Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?
  • favicon-cheat-sheet

你可能感兴趣的:(favicon.ico文件简介)