Favicon | 无尽的边界

背景

Favicon是整个网页中一个非常小的组成部分，它虽然并不起眼，但若被精心设计，却可以让网页变得精致、有趣。

Favicon，即favorites icon。页面中引入Favicon，能使浏览器收藏夹中的快捷方式不仅显示网站的标题，还显示网站管理员为这个网站制作的特定icon。在部分浏览器中，标签页上、搜索栏中，也能显示这个icon，比如：

Mac下Safari浏览器的搜索栏：

Mac下Chrome的Tab&收藏夹：

通过对Favicon做一些定制，我们能做一些有趣的效果，比如：

Loading动画：

提示当前登录账户的未读通知数：

Favicon用法

引入

默认情况下，会从WEB服务器的根目录读取favicon.ico文件。因此，只要在WEB服务器根目录放置了favicon.ico，就会被浏览器使用。

也可以在网页的头部<head>标签中，使用<link>标签指定引入：

<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16" />
        <!-- ...其他资源 -->
    </head>
</html>

rel属性声明引入Favicon文件。

href属性声明Favicon文件的路径，可以是类似/path/to/favicon.ico的绝对路径，也可以是链向外部的完整URLhttps://www.baidu.com/favicon.ico。部分浏览器（如IE7）不支持完整URL方式引入。

type属性声明Favicon的MIME类型，之后会介绍。

sizes属性声明图片的尺寸，值为HeightxWidth或any。位图使用HeightxWidth，可伸缩的图（如svg）使用any。现在这个属性没有浏览器支持。

1	<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16" />

1	<link rel="shortcut icon" href="/favicon_32x32.ico" type="image/vnd.microsoft.icon" sizes="32x32" />

1	<link rel="shortcut icon" href="/favicon_64x64.svg" type="image/svg+xml" sizes="any" />

格式

常见的favicon的格式有.ico、.png、.svg、.gif。

.ico文件的兼容性最好，所有浏览器都支持MIME类型为image/vnd.microsoft.icon的.ico图标，这也是最早支持的格式。

.png与.ico使用上基本没有差别，但市面上制作、处理.png的工具更多，应用更广。.png的兼容性不如.ico。

.svg的优势在于，高分辨率屏幕下，图片不会模糊。

.gif的favicon在部分浏览器下能实现动画效果。将favicon设置为如下.gif图：

在firefox中，有动态效果：

IE9及以下（以上待测）不支持.gif格式，显示默认图标；chrome不支持动画，显示静态图。

加载顺序

浏览器加载favicon的顺序，如下图所示：

举个例子，Bing通过href引入了后缀为.ico但实际为png格式的图片：

1	<link href="/sa/simg/bing_p_rr_teal_min.ico" rel="shortcut icon">

Chrome支持png格式，打开后能正常显示：

IE9打开后显示浏览器默认图标：

详细兼容性见图片格式兼容性。

当页面中引入多个favicon时，各浏览器中加载顺序有所不同，比如：

1
2
3

<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16" />
<link rel="shortcut icon" href="/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon-32.png" type="image/png" sizes="32x32" />

Chrome中显示type="image/vnd.microsoft.icon"的icon，而firefox中显示后出现的icon。还有更加复杂的情况，引用弄懂Favicon这篇文章的内容：

令我沮丧的是，Chrome，Firefox，Opera 7+，和Safari 4+都支持PNG格式的favicon，但是Chrome和Safari在两种格式都提供的情况下却会使用ICO格式，而且完全无视favicon的声明顺序。另一方面，IE不支持PNG格式的favicon，但是它会忽略PNG格式的声明以及声明顺序而直接使用ICO格式的favicon。
那些兼容PNG格式favicon的浏览器是如何确定使用哪个favicon的？Firefox和Safari会使用最后声明的那个。Chrome for Mac只会使用32×32大小的ICO格式。Chrome for Windows会首选16×16大小的ICO格式。如果在没有上述选项的情况下，两种平台的Chrome都会使用第一个声明的favicon，这点正好与Firefox和Safari相反。Chrome for Mac确实会忽略16×16的favicon而直接使用32×32的，如果在非视网膜屏的设备上就会把它缩小到16×16。Opera则完全是一种中立的态度，它会从所有声明的可用的favicon中完全随机地选择一个。我喜欢Opera这种做法。

为了保证加载正确的favicon，我们可以根据浏览器UA，动态添加favicon：

var ua = (function () {
    var agent = navigator.userAgent.toLowerCase();
    // New function has access to 'agent' via closure
    return function (browser) {
        return agent.indexOf(browser) !== -1;
    };
}());
var chrome = ua('chrome');
// ...省略其他浏览器的UA判断
function insertFavicon(href, type) {
    var link = document.createElement('link');
    link.rel = 'shortcui icon';
    link.href = href;
    link.type = type;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(link);
}
// ...省略根据UA，调用insertFavicon的逻辑