The current HTML5 specification recommends specifying size icons in multiple sizes using the attributes rel=”icon” sizes=”space-separated list of icon dimensions” within a tag. [07000] Multiple icon formats,including container formats such as Microsoft .ico and Macintosh .icns files,as well as scalable Vector Graphics may be provided by including the icon’s content type in the form of type=”file content-type” within the tag.
<link rel=icon href=favicon.png sizes="16x16" type="image/png"> <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> <link rel=icon href=iphone.png sizes="57x57" type="image/png"> <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
注意：我知道Apple使用他们的apple-touch-icon元标记方法比HTML5方法。
维基百科文章声称：
The Google Chrome web browser however,will select the closest matching size from those provided in the HTML headers to create 128×128 pixel application icons when the user chooses the Create application shortcuts… from the “Tools” menu.
Internet Explorer(v9到v11)和Firefox如何处理这个？文章是否正确处理Chrome如何处理HTML Favicon？ (没有引用Chrome的来源确认这一点。)
解决方法
当工作来创建Cross browser Favicon(包括触摸图标)时，有几个事情需要考虑。
第一个(当然)是Internet Explorer。 IE不支持PNG favicons直到版本11.所以我们的第一行是一个条件注释的favicon在IE 9及以下：
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
要覆盖图标的使用创建它在32×32像素。请注意，rel =“快捷方式图标”用于IE识别需要不是标准的快捷方式的图标。此外，我们将.ico favicon包装在IE条件注释中，因为Chrome和Safari将使用.ico文件(如果它存在)，尽管其他选项可用，不是我们想要的。
以上覆盖IE直到IE 9. IE 11接受PNG图标，然而，IE 10不接受。此外，IE 10不会读取条件注释，因此IE 10不会显示图标。有了IE 11和Edge可用，我没有看到IE 10在广泛使用，所以我忽略这个浏览器。
对于其余的浏览器，我们将使用标准的方式来引用favicon：
<link rel="icon" href="path/to/favicon.png">
此图标的大小应为196×196像素，以涵盖可能使用此图标的所有设备。
为了涵盖移动设备上的触摸图标，我们将使用Apple的专有方式引用触摸图标：
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
使用rel =“apple-touch-icon-precomposed”将不会应用在iOS上添加书签时的反射光泽。要使iOS应用shine使用rel =“apple-touch-icon”。此图标的大小应为180×180像素，因为苹果推荐的最新iPhones和iPad的当前大小。我读过黑莓也会使用rel =“apple-touch-icon-precomposed”。
注意：Chrome for Android状态：
The apple-touch-* are deprecated,and will be supported only for a short time. (Written as of beta for m31 of Chrome).
Windows 8.1上的IE 11的自定义图块
Windows 8.1上的IE 11提供了一种为您的网站创建固定图块的方法。
Microsoft建议创建以下大小的几个磁贴：
Small: 128 x 128
Medium: 270 x 270
Wide: 558 x 270
Large: 558 x 558
这些应该是透明的图像，我们将定义一个颜色背景。
创建这些图像后，您应该使用以下代码创建一个名为browserconfig.xml的xml文件：
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="images/smalltile.png"/> <square150x150logo src="images/mediumtile.png"/> <wide310x150logo src="images/widetile.png"/> <square310x310logo src="images/largetile.png"/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>
将此xml文件保存在网站的根目录中。当一个网站被固定IE将寻找这个文件。如果你想将xml文件命名为不同的或者在不同的位置添加这个元标记的头：
<Meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
有关IE 11自定义图块和使用XML文件visit Microsoft’s website的其他信息。
把它放在一起：
把上面的代码看起来像这样：
<!-- For IE 9 and below. ICO should be 32x32 pixels in size --> <!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--> <!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <!-- Firefox,Chrome,Safari,IE 11+ and Opera. 196x196 pixels in size. --> <link rel="icon" href="path/to/favicon.png">
Windows Phone Live Tiles
如果用户使用Windows Phone，他们可以将网站固定到手机的开始屏幕。不幸的是，当他们这样做，它显示您的手机的屏幕截图，而不是一个图标(甚至上面提到的MS特定代码)。要为Windows Phone用户为您的网站创建“活动磁贴”，必须使用以下代码：
Here are detailed instructions from Microsoft但这里是一个概要：
步骤1
为您的网站创建一个正方形图像，以支持高分辨率屏幕创建大小为768×768像素。
第2步
添加此图片的隐藏叠加层。下面是来自Microsoft的示例代码：
<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>
步骤3
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft建议您检测Windows Phone，并只显示那些用户的链接，因为它不会为其他用户工作。
步骤4
接下来，您添加一些JS来切换叠加层的可见性
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
关于尺寸的注意事项
我使用一种尺寸，因为每个浏览器都会根据需要缩小图片。我可以添加更多的HTML来指定多个大小，如果需要带宽较低的人，但我已经压缩PNG文件大量使用TinyPNG，我觉得这不必要的我的目的。此外，根据philippe_b的answer Chrome和Firefox有错误，导致浏览器加载所有大小的图标。使用一个大图标可能比多个较小的图标更好，因为这个。
进一步阅读
对于那些谁想要更多的细节，请看下面的链接：
> Wikipedia Article on Favicons
> The Icon Handbook
> Understand the Favicon由Jonathan T. Neal
> rel=”shortcut icon” considered harmful由Mathias Bynens
> Everything you always wanted to know about touch icons，Mathias Bynens
原文地址：https://www.jb51.cc/html5/170340.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
