HTML5 定义图标

网站图标一般显示在浏览器选项卡、历史记录、书签、收藏夹或地址栏中。图标大小一般为 16x16px，透明背景。移动设备图标大小：iPhone图标大小为57x57px或114x114px (Retina屏），iPad图标大小为72x72px或144x144px (Retina屏）。Android系统支持该尺寸的图标。

■实例设计

    第1步，创建大小为16><16px的图像，保存为favicon.ico，注意扩展名为.ico。为Retina屏创建一个 32x32px的图像。

    第2步，为触屏设备至少创建一个图像，并保存为png格式。如果只创建了一个，将其命名为apple-touchicon.png。如有需要，还可以创建其他的触屏图标。

    第3步，将图标图像放在网站根目录。

    第4步，新建HTML5文档，在网页头部位置输入下面代码。

    <link rel="icon" href="/fayicon.ico" type="image7x-icon"/>

    <link rel="shortcut icon" href="/favicon.icq" type="image/x-icon"/>

第5步，浏览网页，浏览器会自动在根目录寻找这些特定的文件名，找到后就将图标显示出来。

■小结

如果浏览器无法显示，则可能是浏览器缓存和生成图标慢的问题，尝试清除缓存，或者先访问图标：http://localhostZfavicon.ico，然后再访问网站，就正常显示了。