我正在阅读维基百科上的 Favicon 页面。他们提到了 Favicon 的 HTML 5 规范:
当前的 HTML5 规范建议使用标签内的属性 rel=”icon” sizes=”space-separated list of icon dimensions” 指定多种尺寸的图标大小。[来源] 可以通过在标签。
查看引用的文章(W3),他们展示了这个例子:
<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">
我的问题是任何浏览器都支持 HTML 5 方法吗?
注意:我知道 Apple 使用他们的apple-touch-icon元标记方法而不是 HTML5 方法。
apple-touch-icon
维基百科文章声称:
然而,当用户从“工具”菜单中选择“创建应用程序快捷方式…”时,Google Chrome 网络浏览器将从 HTML 标头中提供的尺寸中选择最接近的匹配尺寸来创建 128×128 像素的应用程序图标。
Internet Explorer(v9 到 v11)和 Firefox 如何处理这个问题?这篇文章在 Chrome 如何处理 HTML Favicon 方面是否正确?(Chrome 没有引用任何来源来证实这一点。)
在搜索中,除了 Wikipedia 文章之外,我无法在 HTML 5 Favicon 上真正找到任何(可靠的)信息。
提供的答案(在本文发布时)是仅链接的答案,所以我想我会将链接总结为答案以及我将使用什么。
在创建跨浏览器网站图标(包括触摸图标)时,需要考虑几件事。
第一个(当然)是 Internet Explorer。IE 直到版本 11 才支持 PNG favicons。所以我们的第一行是 IE 9 及以下版本的 favicons 的条件注释:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
要涵盖图标的用途,请将其创建为 32x32 像素。注意rel="shortcut icon"IE 识别图标需要shortcut不标准的词。.ico此外,我们将favicon包装在 IE 条件注释中,因为 Chrome 和 Safari 将使用该.ico文件(如果存在),尽管其他选项可用,但不是我们想要的。
rel="shortcut icon"
shortcut
.ico
以上涵盖了 IE 到 IE 9。IE 11 接受 PNG favicon,但是 IE 10 不接受。IE 10 也不会读取条件注释,因此 IE 10 不会显示图标。有了 IE 11 和 Edge,我看不到 IE 10 得到广泛使用,所以我忽略了这个浏览器。
对于其他浏览器,我们将使用标准方式来引用 favicon:
<link rel="icon" href="path/to/favicon.png">
此图标的大小应为 196x196 像素,以涵盖所有可能使用此图标的设备。
为了覆盖移动设备上的触摸图标,我们将使用 Apple 专有的方式来引用触摸图标:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
在 iOS 上添加书签时,使用rel="apple-touch-icon-precomposed"不会应用反射光泽。要让 iOS 应用闪耀使用rel="apple-touch-icon". 此图标的大小应为 180x180 像素,因为这是 Apple 为最新的 iPhone 和 iPad 推荐的当前大小。我读过黑莓也会用rel="apple-touch-icon-precomposed"。
rel="apple-touch-icon-precomposed"
rel="apple-touch-icon"
注意:Android 版 Chrome 声明:
apple-touch-* 已弃用,仅在短时间内受支持。(为 Chrome 的 m31 编写测试版)。
Windows 8.1+ 上 IE 11+ 的自定义磁贴
Windows 8.1+ 上的 IE 11+ 确实提供了一种为您的站点创建固定磁贴的方法。
Microsoft 建议创建几个以下大小的图块:
小:128 x 128 中:270 x 270 宽:558 x 270 大:558 x 558
小:128 x 128
中:270 x 270
宽:558 x 270
大:558 x 558
这些应该是透明图像,因为我们接下来将定义颜色背景。
创建这些图像后,您应该创建一个browserconfig.xml使用以下代码调用的 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:
head
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
有关 IE 11+ 自定义图块和使用 XML 文件的更多信息,请访问 Microsoft 网站。
把它们放在一起:
综上所述,上面的代码如下所示:
<!-- 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 用户制作“动态磁贴”,必须使用以下代码:
以下是来自 Microsoft 的详细说明,但这里有一个概要:
步骤1
为您的网站创建一个方形图像,以支持高分辨率屏幕,以 768x768 像素大小创建它。
第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 来指定多种尺寸,但我已经在使用TinyPNG大量压缩 PNG 文件,我发现这对我的目的来说是不必要的。此外,根据回答,Chrome和 Firefox 存在导致浏览器加载各种尺寸图标的错误。因此,使用一个大图标可能比多个小图标更好。