HTML 5的图标-支持？

小开

最佳答案

所提供的答案(在这篇文章的时候)是链接的答案，所以我想我会总结成一个答案的链接，我将使用什么。

当工作创建跨浏览器收藏夹图标(包括触摸图标)有几件事情要考虑。

第一个(当然)是 Internet Explorer。IE 在11版之前不支持 PNG 图标。所以我们的第一行是 IE 9及以下的收藏条件注释:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

为了覆盖图标的使用，将其创建为32x32像素。注意，IE 的 rel="shortcut icon"识别图标需要的字 shortcut是不标准的。此外，我们还将 .ico的图标包装在 IE 条件注释中，因为如果存在的话，Chrome 和 Safari 会使用 .ico文件，尽管还有其他选项，但不是我们想要的。

以上内容涵盖了 IE 到 IE9。IE 11接受 PNG 图标，但是 IE 10不接受。此外，IE10不会读取条件评论，因此 IE10不会显示一个收藏夹图标。有了 IE11和 Edge，我看不到 IE10被广泛使用，所以我忽略了这个浏览器。

对于其他的浏览器，我们将使用标准的方式来引用图标:

<link rel="icon" href="path/to/favicon.png">

这个图标应该是196x196像素的大小，以覆盖所有可能使用这个图标的设备。

为了涵盖移动设备上的触摸图标，我们将使用苹果的专有方式来引用一个触摸图标:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

在 iOS 上使用 rel="apple-touch-icon-precomposed"不会产生反光。要让 iOS 发光，使用 rel="apple-touch-icon"。这个图标应该大小为180x180像素，因为这是目前苹果推荐的最新款 iPhone 和 iPad 的尺寸。我已经看到黑莓也将使用 rel="apple-touch-icon-precomposed"。

值得注意的是: 安卓版 Chrome 浏览器声明:

不推荐使用 apple-touch-* ，并且只支持很短的时间。(在 Chrome 的 m31测试版中编写)。

在 Windows 8.1 + 上为 IE 11 + 定制瓷砖

Windows 8.1 + 上的 IE11 + 确实提供了一种为您的站点创建固定贴片的方法。

微软建议创建几个大小如下的贴片:

小型: 128 x 128

中等: 270 x 270

宽: 558x270

大: 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 标记添加到 head:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

有关 IE11 + 自定义瓷砖和使用 XML 文件访问微软的网站的更多信息。

总而言之:

把上面的代码放在一起看起来像这样:

<!-- 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 用户的“ Live Tile”，你必须使用以下代码:

下面是微软的详细说明，但是这里有一个概要:

第一步

为您的网站创建一个正方形图像，以支持高分辨率屏幕创建它在768x768像素的大小。

第二步

添加此图像的隐藏覆盖图:

<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>

第三步

然后您可以添加以下行来添加一个引脚开始链接:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

微软建议您检测 Windows 手机，并只显示该链接到这些用户，因为它不会为其他用户工作。

第四步

接下来，添加一些 JS 来切换覆盖可见性

<script>
function ToggleTileOverlay() {
var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

尺寸注释

我使用一个大小，因为每个浏览器将缩小图像的必要性。我可以添加更多的 HTML 来指定多种大小，如果需要的话，对于那些带宽较低的文件，但是我已经在使用 TinyPNG大量压缩 PNG 文件，我发现这对于我的目的来说是不必要的。此外，根据 Philippe _ b的回答浏览器和火狐浏览器的 bug，导致浏览器载入所有大小的图标。因此，使用一个大图标可能比使用多个小图标要好。

进一步阅读

如欲了解更多详情，请浏览以下连结:

Rel = “快捷图标”被认为是有害的

你一直想知道的关于触摸图标的一切