--- title: 网站图标： 一个发展中的角色 tags: - Favicon categories: 学习 permalink: favicon-a-changing-role featureImage: https://cat.yufan.me/cats/2013-05-04-01.jpg date: 2013-05-04 01:56:27 --- 许多攻城师并不重视网站图标（Favicon）的重要性，并由此错过了使他们的网站变得更个性、更难忘的机会。 Favicon远远不止是作为一个有趣的位于游览器地址栏顶部的小图标，如今Favicon已经成了网站标识的一部分并被用于推广品牌。恰当地使用它们能给你网站的访客带来好的第一印象和长久的回访。 Favicon的概念由Internet Explorer在1999年第一次提出。它们由ICO格式构造，并以`/favicon.ico`形式放于域名的根目录。从那以后，许多东西改变了。现在Favicon由于多种多样的理由在不同的设备中被使用。 为一个网站添加Favicon的最基础的格式如下所示： ``` html ``` # 一、rel 属性 上述声明中最重要的部分就是`rel`属性。就是这个属性能帮助游览器确定Favicon并正确地展示出来。传统的IE游览器同时使用`shortcut`和`icon`来确定图片，并展示它于游览器标题栏和任务栏。在HTML5发布之后，这种情况变成了只有“icon”用作Favicon的全局展示。 # 二、Type属性 `type`属性有时能确定游览器是否显示Favicon。Internet Explorer 仅仅关注ICO文件在服务器是否有MIME定义，否则它将忽略这个文件。通常情况下，对IE需要以下述方式声明Favicon： ``` html ``` ``` html ``` ``` html ``` Favicon近些日子的演变中最棒的进步之一就是PNG文件的支持。你可以使用有圆角的透明图像来作为你的网站的Favicon。在ICO格式中，圆角+透明边缘的样式太难实现了。像Google Chrome和Mozilla Firefox一类的游览器允许使用PNG格式的Favicon。 需要注意的一个重点是，当ICO格式和PNG格式都被声明使用时，ICO格式的Favicon将被所有的游览器使用，不管它们是以什么样的顺序声明。 ``` html ``` ``` html ``` # 三、尺寸 Favicon的另一个进步是尺寸。老一点的游览器使用`16×16`注1 作为Favicon的标准尺寸，然而现代游览器允许`32×32`尺寸的图标，之后缩小到合适尺寸。IE 10 使用`32×32`尺寸的图标于地址栏进行展示。 ```html ``` 随着PNG格式的Favicon的使用，另一种被称为`size`的新属性增加了进来，它确定了`herf`属性中文件的具体尺寸。 ``` html ``` 通常情况下，Firefox和Safari将使用上面第一个声明的Favicon，而不同版本的Chrome有不同的偏爱。Windows版本的Chrome将使用`16×16`或者ICO文件作为首要的展示，Mac版本的Chrome将使用ICO格式的Favicon，否则它将使用`32×32`尺寸的Favicon并缩小到`16×16`以便在非视网膜设备上获得更高的清晰度。相反的是，Opera没有这样的偏好，它从所有的Favicon中随机地选择一个来于展示。 ![icons](https://cat.yufan.me/cats/ame/figure12.png) # 四、物尽其用 既然Internet Explorer不支持PNG文件并且其它现代游览器能支持，我们可以用条件语句将ICO文件包裹并将PNG文件搁置。例如： ``` html ``` ``` html ``` 但是针对上面的声明，我们有一个问题！IE 10 不支持条件声明并且不支持PNG文件。那么我们现在应该如何做？ 我们可以把ICO文件放在根目录，并只对PNG文件做声明。以这种方式，Internet Explorer 将忽略语句`