menu
网站图标: 一个发展中的角色

许多攻城师并不重视网站图标(Favicon)的重要性,并由此错过了使他们的网站变得更个性、更难忘的机会。

Favicon 远远不止是作为一个有趣的位于游览器地址栏顶部的小图标,如今 Favicon 已经成了网站标识的一部分并被用于推广品牌。恰当地使用它们能给你网站的访客带来好的第一印象和长久的回访。

Favicon 的概念由 Internet Explorer 在 1999 年第一次提出。它们由 ICO 格式构造,并以 /favicon.ico 形式放于域名的根目录。从那以后,许多东西改变了。现在 Favicon 由于多种多样的理由在不同的设备中被使用。

为一个网站添加 Favicon 的最基础的格式如下所示:

<link rel="shortcut icon" href="favicon.ico"/>

一、rel 属性

上述声明中最重要的部分就是 rel 属性。就是这个属性能帮助游览器确定 Favicon 并正确地展示出来。传统的 IE 游览器同时使用 shortcuticon来确定图片,并展示它于游览器标题栏和任务栏。在 HTML5 发布之后,这种情况变成了只有“icon”用作 Favicon 的全局展示。

二、Type 属性

type 属性有时能确定游览器是否显示 Favicon。Internet Explorer 仅仅关注 ICO 文件在服务器是否有 MIME 定义,否则它将忽略这个文件。通常情况下,对 IE 需要以下述方式声明 Favicon:

<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon">
<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 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 将被所有的游览器使用,不管它们是以什么样的顺序声明。

<!-- 在 Chrome, Safari, IE 中有效 -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 在 Firefox, Opera, Chrome 和 Safari 中有效 -->
<link rel="icon" href="path/to/favicon.png">

三、尺寸

Favicon 的另一个进步是尺寸。老一点的游览器使用16×16 注 1 作为 Favicon 的标准尺寸,然而现代游览器允许 32×32 尺寸的图标,之后缩小到合适尺寸。IE 10 使用 32×32 尺寸的图标于地址栏进行展示。

<!-- 对 IE 6~10 -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- 针对所有其他的游览器 -->
<link rel="icon" href="favicon.ico"/>

随着 PNG 格式的 Favicon 的使用,另一种被称为 size 的新属性增加了进来,它确定了 herf 属性中文件的具体尺寸。

<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 中随机地选择一个来于展示。

icons

四、物尽其用

既然 Internet Explorer 不支持 PNG 文件并且其它现代游览器能支持,我们可以用条件语句将 ICO 文件包裹并将 PNG 文件搁置。例如:

<!-- 对 IE -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- 对支持 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-iconapple-touch-icon-precomposed来作为 rel 属性值。

下面的 Favicons 不仅仅用于在游览器中展示,当网站在应用程序界面上被设为书签时同样需要它们。这样的 Favicon 需要更高的分辨率度和专门定制,以便在其它应用之间引人注目。

苹果图标

<!-- 苹果设备中的圆角加反射光泽的图标声明 -->
<link rel="apple-touch-icon" href="favicon.png" />
<!-- 没有反射光泽的图标声明 -->
<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 是必须的。

windows8 图标

<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 设为标准,所以不同的用户代理 注 2确定它们自己的标准。

以前,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 支持一览表

Application support

B.1.3、APNG 的制作工具

VirtualDub APNG Mod

APNG Anime Maker

APNG Edit

Animat

B.1.4、APNG 相关介绍

如何制作 APNG 动画 PNG 的 Favicon ——By 大猫

B.2、快速创建不同尺寸的 Favicon

B.2.1、HTML5 Boilerplate 的多层 Favicon PSD 模版简介

Image Title

站在巨人的肩膀上,我提供了这个调整过的 Photoshop 模版来帮助创建一个网站的触摸图标(iPad 上的),和依照当前推荐比例的多层次化 Favico。

以 Hans Christian Rienl 的 作品 为基础,并依照别人的步骤使用本模板,希望能简化你创造那些有爱图标的步骤。

B.2.2、使用步骤

  • 下载H5BP-Multi-Layer-FavIcons

  • 解压使用 Photoshop 打开 PSD 文件。

  • 双击 144x144 smart object layer(双击部分见下面截图)

截图

  • 在新打开的 PSD 窗口上添加上你自己的图标

  • 编辑完内容后,选择 文件保存 来提交变更。

  • 再一次游览原来的模板,看是否变化。

  • 选择 文件存储为 Web 所用格式

  • 按住 Shift,依次点击每一个图标切片来添加多选择状态。

  • 右边 预设 部分选择 PNG 格式。

  • 点击 存储...,在打开的选择保存位置中在 切片 这个下拉菜单中选择 选中的切片

  • 点击 保存

  • 打开你保存的位置。

  • 打开 ICO 格式转换网址:http://converticon.com/

  • 点击 Get Start 上传你想转换为 ICO 格式的 PNG 文件。

  • 在新页面点击 Export 保存即可。

B.3、更多阅读


原文:Favicon: A Changing Role
译者:雨帆,转载时请保留译文链接和原文链接。