5.10　为网站添加图标

5.10　为网站添加图标

出现在地址栏、标签页和书签上小图标称为favicon。这个词是favorites icon（收藏夹图标）的简称。

苹果设备（iPhone、iPod touch和iPad）的主界面要求更大尺寸的图标，推荐尺寸为114像素×114像素。不要为添加炫丽的圆角、阴影和反射光泽感到担心，这些设备的操作系统会自动进行处理。Android操作系统也支持这些图标。

为网站添加图标

创建一个16像素×16像素的图像，并保存为ICO格式，如图5.10.1所示。也可以保存为PNG和GIF格式。
为触屏设备创建一个114像素×114像素的图像，并保存为PNG格式。
在HTML5文档的head部分，输入，其中favicon.ico是服务器上图标的名称和位置。如果图像为PNG，则输入。如果图像为GIF，则输入。
在HTML5文档的head部分，输入，其中apple-touch-icon.png是服务器上图标的名称和位置。

5.10　为网站添加图标 - 图1

图5.10.1　在现实环境中，favicon比这里显示的要小。它们只有16像素×16像素

提示　通常应将favicon保存为ICO格式（参见图5.10.2和图5.10.3）。Photoshop中有一个很有用的创建ICO格式图标的插件，它是由Telegraphics制作的（www.telegraphics.com.au/sw/）。

...
<head>
     <meta charset="utf-8" />
     <title>Farm Training Podcasts</title>
     <link rel="shortcut icon" href="http://www.ituring.com.cn/favicon.ico" />
     <link rel="apple-touch-icon" href="http://www.ituring.com.cn/apple-touch-icon.png" />
     ...
</head>
...

图5.10.2　如果将文件命名为favicon.ico和apple-touch-icon.png并将它们放在网站的根目录下，即使没有这个link元素，大多数浏览器也会显示它们

5.10　为网站添加图标 - 图2

图5.10.3　favicon通常用于地址栏、收藏夹和书签菜单、标签页。由于浏览器通常将图标显示在灰色或其他颜色的背景上，因此可能要将图标的背景改为透明的

提示　也可以将favicon保存为PNG和GIF格式。一定要在type中使用正确的MIME¹类型。

^{1 MIME即Multipurpose Internet Mail Extension（多用途互联网邮件扩展），是用于指定内容数据类型的互联网标准。——译者注}

提示　Internet Explorer原来要求将favicon.ico放在网站的根目录。现在已经没有这个要求了，不过，如果没有link元素，浏览器仍会查看这个位置（参见图5.10.4）。

5.10　为网站添加图标 - 图3

图5.10.4　在iOS设备中，将网站从Safari添加到主屏幕上时，就会用到apple-touch-icon

5.10 为网站添加图标