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