Yufan Sheng b36e7f9957 Archive the old blog

2024-06-14 02:15:18 +08:00

12 KiB

Raw Blame History

title

一、rel 属性

上述声明中最重要的部分就是rel属性。就是这个属性能帮助游览器确定Favicon并正确地展示出来。传统的IE游览器同时使用shortcut和icon来确定图片，并展示它于游览器标题栏和任务栏。在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中随机地选择一个来于展示。

四、物尽其用

既然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-icon和apple-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是必须的。

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

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模版简介

站在巨人的肩膀上，我提供了这个调整过的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
译者：雨帆，转载时请保留译文链接和原文链接。

12 KiB Raw Blame History Unescape Escape