251 lines
12 KiB
Markdown
251 lines
12 KiB
Markdown
---
|
||
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
|
||
<link rel="shortcut icon" href="favicon.ico"/>
|
||
```
|
||
<!-- more -->
|
||
|
||
# 一、rel 属性
|
||
|
||
上述声明中最重要的部分就是`rel`属性。就是这个属性能帮助游览器确定Favicon并正确地展示出来。传统的IE游览器同时使用`shortcut`和`icon`来确定图片，并展示它于游览器标题栏和任务栏。在HTML5发布之后，这种情况变成了只有“icon”用作Favicon的全局展示。
|
||
|
||
# 二、Type属性
|
||
|
||
`type`属性有时能确定游览器是否显示Favicon。Internet Explorer 仅仅关注ICO文件在服务器是否有MIME定义，否则它将忽略这个文件。通常情况下，对IE需要以下述方式声明Favicon：
|
||
|
||
``` html
|
||
<!-- For IE6+ -->
|
||
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon">
|
||
```
|
||
|
||
``` html
|
||
<!-- For IE6+ -->
|
||
<link rel="shortcut icon" href="path/to/favicon.ico">
|
||
```
|
||
|
||
``` html
|
||
<!-- For IE6+ -->
|
||
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon">
|
||
```
|
||
|
||
Favicon近些日子的演变中最棒的进步之一就是PNG文件的支持。你可以使用有圆角的透明图像来作为你的网站的Favicon。在ICO格式中，圆角+透明边缘的样式太难实现了。像Google Chrome和Mozilla Firefox一类的游览器允许使用PNG格式的Favicon。
|
||
|
||
需要注意的一个重点是，当ICO格式和PNG格式都被声明使用时，ICO格式的Favicon将被所有的游览器使用，不管它们是以什么样的顺序声明。
|
||
|
||
``` html
|
||
<!-- 在Chrome, Safari, IE 中有效 -->
|
||
<link rel="shortcut icon" href="path/to/favicon.ico">
|
||
```
|
||
|
||
``` html
|
||
<!-- 在 Firefox, Opera, Chrome 和 Safari 中有效-->
|
||
<link rel="icon" href="path/to/favicon.png">
|
||
```
|
||
|
||
# 三、尺寸
|
||
|
||
Favicon的另一个进步是尺寸。老一点的游览器使用`16×16`<sup>注1</sup> 作为Favicon的标准尺寸，然而现代游览器允许`32×32`尺寸的图标，之后缩小到合适尺寸。IE 10 使用`32×32`尺寸的图标于地址栏进行展示。
|
||
|
||
```html
|
||
<!-- 对 IE 6~10 -->
|
||
<link rel="shortcut icon" href="favicon.ico"/>
|
||
<!-- 针对所有其他的游览器 -->
|
||
<link rel="icon" href="favicon.ico"/>
|
||
```
|
||
|
||
随着PNG格式的Favicon的使用，另一种被称为`size`的新属性增加了进来，它确定了`herf`属性中文件的具体尺寸。
|
||
|
||
``` html
|
||
<link rel="icon" href="favicon16.png" sizes="16x16">
|
||
<link rel="icon" href="favicon32.png" sizes="32x32">
|
||
<link rel="icon" href="favicon48.png" sizes="48x48">
|
||
<link rel="icon" href="favicon64.png" sizes="64x64">
|
||
<link rel="icon" href="favicon128.png" sizes="128x128">
|
||
```
|
||
|
||
通常情况下，Firefox和Safari将使用上面第一个声明的Favicon，而不同版本的Chrome有不同的偏爱。Windows版本的Chrome将使用`16×16`或者ICO文件作为首要的展示，Mac版本的Chrome将使用ICO格式的Favicon，否则它将使用`32×32`尺寸的Favicon并缩小到`16×16`以便在非视网膜设备上获得更高的清晰度。相反的是，Opera没有这样的偏好，它从所有的Favicon中随机地选择一个来于展示。
|
||
|
||
|
||
|
||
# 四、物尽其用
|
||
|
||
既然Internet Explorer不支持PNG文件并且其它现代游览器能支持，我们可以用条件语句将ICO文件包裹并将PNG文件搁置。例如：
|
||
|
||
``` html
|
||
<!-- 对 IE -->
|
||
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
|
||
```
|
||
|
||
``` html
|
||
<!-- 对支持PNG的现代游览器 -->
|
||
<link rel="icon" type="image/png" href="path/to/favicon.png">
|
||
```
|
||
|
||
但是针对上面的声明，我们有一个问题！IE 10 不支持条件声明并且不支持PNG文件。那么我们现在应该如何做？
|
||
|
||
我们可以把ICO文件放在根目录，并只对PNG文件做声明。以这种方式，Internet Explorer 将忽略语句`<icon rel="icon">`并展示根目录的ICO图片。现代游览器则将找到`<icon rel="icon">`声明并使用PNG文件。
|
||
|
||
# 五、对于苹果设备
|
||
|
||
搭载iOS 1.1.3和以后版本的苹果设备需要一种特别类型的`rel`属性，此属性可以被前面提到的苹果设备识别。在这些设备上使用`apple-touch-icon`和`apple-touch-icon-precomposed`来作为`rel`属性值。
|
||
|
||
下面的Favicons不仅仅用于在游览器中展示，当网站在应用程序界面上被设为书签时同样需要它们。这样的Favicon需要更高的分辨率度和专门定制，以便在其它应用之间引人注目。
|
||
|
||
|
||
|
||
``` html
|
||
<!-- 苹果设备中的圆角加反射光泽的图标声明 -->
|
||
<link rel="apple-touch-icon" href="favicon.png" />
|
||
```
|
||
|
||
``` html
|
||
<!-- 没有反射光泽的图标声明 -->
|
||
<link rel="apple-touch-icon-precomposed" href="favicon.png" />
|
||
```
|
||
|
||
`apple-touch-icon-precomposed`这个属性值用于指示设备不要给Favicon加上反射光泽，仅用它原来的样子。
|
||
|
||
为苹果设备推荐的基本尺寸是`57×57`并使用直角，对于更高分辨的屏幕使用`114×114`的尺寸。iPad 2使用的是`72×72`尺寸的Favicon，与此同时，iPad 3的视网膜屏幕需要`114×114 `尺寸的图片。
|
||
|
||
# 六、对于 Windows 8
|
||
|
||
Windows 8 使用磁贴这个概念并可选择将某个网站固定在主屏幕上，对于那些被固定的网站而言，为了在屏幕上变得好看，高质量的Favicon是必须的。
|
||
|
||
|
||
|
||
``` html
|
||
<meta name="msapplication-TileColor" content="#D83434">
|
||
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
|
||
```
|
||
|
||
注意到在上述的声明中，我使用了`meta`标签来取代了`link`标签。Windows 8 更喜欢在`meta`中对磁贴需要的图片的声明。
|
||
`msapplication-TileColor`确定了填充在磁贴上的颜色，`msapplication-TileImage`确定了磁贴正中间所展示的图片。
|
||
|
||
# 七、Favicon的局限
|
||
|
||
有时因为重复地在同一个位置检查Favicon，这会对你的网站产生额外的流量。有时如果不注意的话，这种情况甚至会造成记录在错误日志中的无用的404错误。
|
||
|
||
Favicon的另一个局限性就是不能自动地加载新的Favicon，这种问题大多数情况下发生在老的游览器上，例如IE 6~9 （译注：Chrome 23版本前的游览器也是会发生的，除非清除全部的缓存。译者本人使用的Chrome27对于本地页面的favicon也不能加载。）
|
||
|
||
`rel`属性同样没有被W3C设为标准，所以不同的用户代理<sup>注2</sup>确定它们自己的标准。
|
||
|
||
以前，Favicon 一直是多种网络钓鱼攻击、窃听的首要目标。例如，当它们（钓鱼网站）没有被认证为安全时展示了认证安全的图标。
|
||
|
||
当决定是否以及如何在网站上使用Favicon时，这些是全部应该予以考虑的问题。但是，没有任何问题能阻止你创造性地使用Favicon。
|
||
|
||
如今，Favicon有着自己的重要性。它的视觉冲击力将不断增长，所以你同样应该期待它在功能上的增长。
|
||
|
||
# A、注释
|
||
|
||
* **注1**：严格意义上说，里面的数字的单位是像素每英寸，DPI是72，此为网站设计时的常识数据。
|
||
* **注2**：用户代理 User Agent，本文里的用户代理是指浏览器，它的信息包括硬件平台、系统软件、应用软件和用户个人偏好。
|
||
|
||
# B、扩展学习
|
||
|
||
## B.1、APNG 格式的 Favicon
|
||
|
||
### B.1.1、APNG 简介
|
||
|
||
动态便携式网络图形（APNG）文件格式是对便携式网络图形（PNG）规范的非标准扩展。它设计为与动态GIF文件效果类似的动态PNG文件。同时支持GIF所没有的24位图像和8位的透明度。
|
||
|
||
APNG文件的第一帧被存储为普通的PNG流，所以大多数标准PNG解码器都能展示APNG文件的第一帧。帧速数据和额外的动画帧被存储在额外的块里面（依照原始的PNG规范的规定）。
|
||
|
||
将APNG与多图像网络图形（MNG）比较，MNG是一种由相同的PNG团队打造的、全面的位图动画格式，而APNG的优点是更小的数据规模和对旧的PNG实现的兼容。
|
||
|
||
### B.1.2、游览器对 APNG 支持一览表
|
||
|
||
|
||
|
||
### B.1.3、APNG 的制作工具
|
||
|
||
* **[VirtualDub APNG Mod](http://vdubapngmod.sourceforge.net/)**
|
||
|
||
|
||
|
||
* **[APNG Anime Maker](https://sites.google.com/site/cphktool/apng-anime-maker)**
|
||
|
||
|
||
|
||
* **[APNG Edit](https://addons.mozilla.org/en-US/firefox/addon/apng-edit/)**
|
||
|
||
|
||
|
||
* **[Animat](https://addons.mozilla.org/en-US/firefox/addon/animat/)**
|
||
|
||
|
||
|
||
### B.1.4、APNG 相关介绍
|
||
|
||
[如何制作 APNG 动画 PNG 的 Favicon](http://ooxx.me/apng.orz) ——By 大猫
|
||
|
||
## B.2、快速创建不同尺寸的Favicon
|
||
|
||
### B.2.1、HTML5 Boilerplate的多层Favicon PSD模版简介
|
||
|
||
|
||
|
||
站在巨人的肩膀上，我提供了这个调整过的Photoshop模版来帮助创建一个网站的触摸图标（iPad上的），和依照当前推荐比例的多层次化Favico。
|
||
|
||
以Hans Christian Rienl的[作品](http://drublic.de/blog/html5-boilerplate-favicons-psd-template/)为基础，并依照别人的步骤使用本模板，**希望能简化你创造那些有爱图标的步骤。**
|
||
|
||
### B.2.2、使用步骤
|
||
|
||
* 下载[H5BP-Multi-Layer-FavIcons](https://github.com/jonrandahl/H5BP-Multi-Layer-FavIcons/blob/master/PSD/HTML5-Boilerplate-Icons_v3.2.zip)。
|
||
|
||
* 解压使用Photoshop打开PSD文件。
|
||
|
||
* 双击 144x144 smart object layer（双击部分见下面截图）
|
||
|
||
|
||
|
||
* 在新打开的PSD窗口上添加上你自己的图标
|
||
|
||
* 编辑完内容后，选择`文件`→`保存`来提交变更。
|
||
|
||
* 再一次游览原来的模板，看是否变化。
|
||
|
||
* 选择`文件`→`存储为Web所用格式`。
|
||
|
||
* 按住Shift，依次点击每一个图标切片来添加多选择状态。
|
||
|
||
* 右边`预设`部分选择PNG格式。
|
||
|
||
* 点击`存储...`，在打开的选择保存位置中在`切片`这个下拉菜单中选择`选中的切片`。
|
||
|
||
* 点击`保存`。
|
||
|
||
* 打开你保存的位置。
|
||
|
||
* 打开ICO格式转换网址：[http://converticon.com/](http://converticon.com/)
|
||
|
||
* 点击`Get Start`上传你想转换为ICO格式的PNG文件。
|
||
|
||
* 在新页面点击`Export`保存即可。
|
||
|
||
## B.3、更多阅读
|
||
|
||
* [rel="shortcut icon" considered harmful](http://mathiasbynens.be/notes/rel-shortcut-icon)
|
||
* [Everything you always wanted to know about touch icons](http://mathiasbynens.be/notes/touch-icons)
|
||
* [Create the perfect favicon](http://www.netmagazine.com/features/create-perfect-favicon)
|
||
|
||
----
|
||
|
||
原文：[Favicon: A Changing Role](http://www.sitepoint.com/favicon-a-changing-role/)
|
||
译者：[雨帆](http://yufan.me)，转载时请保留译文链接和原文链接。
|