提供的答案(在撰写本文时)仅是链接答案,因此我想我会将链接总结为答案以及我将使用的内容。
在创建跨浏览器图标(包括触摸图标)时,需要考虑几件事。
第一个(当然)是 Internet Explorer。 IE 在版本 11 之前不支持 PNG 图标。因此我们的第一行是 IE 9 及以下版本中图标的条件注释:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
为了涵盖图标的用途,请创建 32x32 像素的图标。注意rel="shortcut icon"
为了让 IE 识别图标,它需要单词shortcut
这不是标准的。我们还包裹了.ico
IE 条件注释中的 favicon 因为 Chrome 和 Safari 将使用.ico
文件(如果存在),尽管有其他可用选项,但这不是我们想要的。
上述内容涵盖 IE 至 IE 9。IE 11 接受 PNG 图标,但 IE 10 不接受。此外,IE 10 不读取条件注释,因此 IE 10 不会显示网站图标。在 IE 11 和 Edge 可用的情况下,我没有看到 IE 10 得到广泛使用,所以我忽略了这个浏览器。
对于其余的浏览器,我们将使用标准方法来引用网站图标:
<link rel="icon" href="path/to/favicon.png">
此图标的大小应为 196x196 像素,以覆盖可能使用此图标的所有设备。
为了涵盖移动设备上的触摸图标,我们将使用 Apple 的专有方式来引用触摸图标:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Using rel="apple-touch-icon-precomposed"
在 iOS 上添加书签时不会应用反光光泽。让 iOS 应用 Shine 使用rel="apple-touch-icon"
。该图标的大小应为 180x180 像素,因为这是 Apple 为最新 iPhone 和 iPad 推荐的当前尺寸。我看过黑莓也会用rel="apple-touch-icon-precomposed"
.
请注意:Android 版 Chrome 声明:
apple-touch-* 已弃用,并且仅在短时间内受支持。 (从 Chrome 的 m31 测试版开始编写)。
Windows 8.1+ 上适用于 IE 11+ 的自定义磁贴
Windows 8.1+ 上的 IE 11+ 确实提供了一种为您的网站创建固定图块的方法。
Microsoft 建议创建一些以下尺寸的图块:
小号:128 x 128
中:270×270
宽:558×270
大:558 x 558
这些应该是透明图像,因为我们接下来将定义颜色背景。
创建这些图像后,您应该创建一个名为的 xml 文件browserconfig.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 文件命名为不同的名称或将其放在不同的位置,请将此元标记添加到head
:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
有关 IE 11+ 自定义磁贴和使用 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 动态磁贴
如果用户使用 Windows Phone,他们可以将网站固定到手机的开始屏幕。不幸的是,当他们这样做时,它会显示您手机的屏幕截图,而不是图标(甚至没有上面引用的 MS 特定代码)。要为您的网站为 Windows Phone 用户制作“动态磁贴”,必须使用以下代码:
这是微软的详细说明但这里有一个概要:
Step 1
为您的网站创建一个方形图像,以支持高分辨率屏幕,将其尺寸创建为 768x768 像素。
Step 2
添加此图像的隐藏叠加层。以下是来自微软的示例代码:
<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>
Step 3
然后,您可以添加以下行来添加引脚以启动链接:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft 建议您检测 Windows Phone 并仅向这些用户显示该链接,因为它对其他用户不起作用。
Step 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我发现这对于我的目的来说是不必要的。另外,根据菲利普_b's answerChrome 和 Firefox 存在导致浏览器加载所有尺寸图标的错误。因此,使用一个大图标可能比使用多个小图标更好。
进一步阅读
对于那些想了解更多详细信息的人,请参阅以下链接:
- 维基百科关于网站图标的文章
- 图标手册
-
了解网站图标作者:乔纳森·T·尼尔
-
rel =“快捷方式图标”被认为是有害的作者:马蒂亚斯·拜恩斯
-
关于触摸图标您一直想了解的一切作者:马蒂亚斯·拜恩斯