HTML 5 Favicon - 支持吗? [英] HTML 5 Favicon - Support?

问题描述

我正在阅读维基百科上的 Favicon 页面.他们提到了 Favicon 的 HTML 5 规范:

<块引用>

当前的 HTML5 规范建议使用标签中的属性 rel="icon" sizes="space-separated list of icon尺寸" 以多种尺寸指定尺寸图标.[source] 多种图标格式，包括容器格式(例如 Microsoft .ico 和 Macintosh .icns 文件)以及可缩放矢量图形可以通过在标签中以 type="file content-type" 形式包含图标的内容类型来提供.

查看引用的文章(W3)，他们展示了这个例子:

<link rel=icon href=windows.ico size="32x32 48x48" type="image/vnd.microsoft.icon"><link rel=icon href=mac.icns size="128x128 512x512 8192x8192 32768x32768"><link rel=icon href=iphone.png size="57x57" type="image/png"><link rel=icon href=gnome.svg size="any" type="image/svg+xml">

我的问题是是否有任何浏览器支持 HTML 5 方法?

注意:我知道 Apple 在 HTML5 方法上使用了他们的 apple-touch-icon 元标记方法.

维基百科文章声称:

<块引用>

但是，当用户从工具"菜单中选择创建应用程序快捷方式.../p>

Internet Explorer(v9 到 v11)和 Firefox 如何处理这个问题?这篇文章在 Chrome 如何处理 HTML Favicon 方面是否正确?(Chrome 没有引用来源证实这一点.)

在搜索中，除了维基百科文章之外，我无法真正找到有关 HTML 5 Favicon 的任何(可靠)信息.

解决方案

所提供的答案(在撰写本文时)只是链接答案，所以我想我会将链接总结为一个答案以及我将使用的内容.

在创建跨浏览器收藏夹图标(包括触摸图标)时，需要考虑几件事情.

第一个(当然)是 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 条件注释中，因为 Chrome 和 Safari 将使用 .ico 文件(如果它存在)，尽管有其他选项可用，而不是我们会使用的喜欢.

以上涵盖了 IE 到 IE 9.IE 11 接受 PNG 图标，但是，IE 10 不接受.此外，IE 10 不读取条件注释，因此 IE 10 不会显示收藏夹图标.随着 IE 11 和 Edge 可用，我没有看到 IE 10 被广泛使用，所以我忽略了这个浏览器.

对于其余浏览器，我们将使用标准方式来引用收藏夹图标:

此图标的大小应为 196x196 像素，以覆盖可能使用此图标的所有设备.

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

使用 rel="apple-touch-icon-precomposed" 在 iOS 上添加书签时不会应用反射光泽.要让 iOS 应用闪耀，请使用 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 x 270

宽:558 x 270

大:558 x 558

这些应该是透明图像，因为我们接下来将定义颜色背景.

创建这些图像后，您应该使用以下代码创建一个名为 browserconfig.xml 的 xml 文件:

将此 xml 文件保存在您网站的根目录中.当站点被固定时，IE 将查找此文件.如果您想为 xml 文件命名不同的名称或将其放在不同的位置，请将此元标记添加到 head:

有关 IE 11+ 自定义磁贴和使用 XML 文件的更多信息访问微软网站.

综合起来:

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

<!--[如果 IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--><!-- 触摸图标 - iOS 和 Android 2.1+ 180x180 像素大小.--><link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- Firefox、Chrome、Safari、IE 11+ 和 Opera.196x196 像素大小.--><link rel="icon" href="path/to/favicon.png">

Windows Phone Live Tiles

如果用户使用的是 Windows Phone，他们可以将网站固定到手机的开始屏幕.不幸的是，当他们这样做时，它会显示您手机的屏幕截图，而不是网站图标(甚至不是上面引用的 MS 特定代码).要为您的网站的 Windows Phone 用户制作动态磁贴"，必须使用以下代码:

这里是来自 Microsoft 的详细说明 但这里是一个概要:

第一步

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

第 2 步

添加此图像的隐藏叠加层.这是来自 Microsoft 的示例代码:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight;高度:100%；宽度:100%；顶部:0px；左:0px；位置:固定；颜色:黑色;可见性:隐藏'><img src="customtile.png" width="320" height="320"/><div style='margin-top: 40px'>添加文本/图形，要求用户固定以开始使用菜单...

第三步

然后您可以添加以下行以添加引脚以启动链接:

<a href="javascript:ToggleTileOverlay()">将此网站固定到您的开始屏幕</a>

Microsoft 建议您检测 Windows Phone 并仅向这些用户显示该链接，因为它不适用于其他用户.

第四步

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

尺寸注意事项

我使用一种尺寸，因为每个浏览器都会根据需要缩小图像.如果带宽较低的用户需要，我可以添加更多 HTML 以指定多个大小，但我已经使用 TinyPNG 我觉得这对我的目的来说是不必要的.此外，根据 philippe_b 的 answer Chrome 和 Firefox 存在导致浏览器加载所有大小图标的错误.因此，使用一个大图标可能比使用多个小图标更好.

进一步阅读

想要了解更多详情的人，请参阅以下链接:

• 维基百科关于 Favicon 的文章
• 图标手册
• 了解 Favicon 作者:Jonathan T. Neal
• rel="shortcut icon" 被 Mathias Bynens 认为是有害的
• 关于触摸图标你一直想知道的一切 作者:Mathias Bynens

I was reading the Favicon page on Wikipedia. They mention the HTML 5 spec for Favicon:

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. [source] 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.

Looking at the cited article (W3) they show this example:

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

My question is do any browsers support the HTML 5 method?

Note: I know Apple uses their apple-touch-icon meta tag method over the HTML5 method.

The wikipedia article claims:

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.

How does Internet Explorer (v9 to v11) and Firefox handle this? And is the article correct in how Chrome handles the HTML Favicons? (There is no source cited for Chrome confirming this.)

In searching I wasn't able to really find any (credible) info on HTML 5 Favicon other than the Wikipedia Article.

解决方案

The answers provided (at the time of this post) are link only answers so I thought I would summarize the links into an answer and what I will be using.

When working to create Cross Browser Favicons (including touch icons) there are several things to consider.

The first (of course) is Internet Explorer. IE does not support PNG favicons until version 11. So our first line is a conditional comment for favicons in IE 9 and below:

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

To cover the uses of the icon create it at 32x32 pixels. Notice the rel="shortcut icon" for IE to recognize the icon it needs the word shortcut which is not standard. Also we wrap the .ico favicon in a IE conditional comment because Chrome and Safari will use the .ico file if it is present, despite other options available, not what we would like.

The above covers IE up to IE 9. IE 11 accepts PNG favicons, however, IE 10 does not. Also IE 10 does not read conditional comments thus IE 10 won't show a favicon. With IE 11 and Edge available I don't see IE 10 in widespread use, so I ignore this browser.

For the rest of the browsers we are going to use the standard way to cite a favicon:

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

This icon should be 196x196 pixels in size to cover all devices that may use this icon.

To cover touch icons on mobile devices we are going to use Apple's proprietary way to cite a touch icon:

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

Using rel="apple-touch-icon-precomposed" will not apply the reflective shine when bookmarked on iOS. To have iOS apply the shine use rel="apple-touch-icon". This icon should be sized to 180x180 pixels as that is the current size recommend by Apple for the latest iPhones and iPads. I have read Blackberry will also use rel="apple-touch-icon-precomposed".

As a note: Chrome for Android states:

The apple-touch-* are deprecated, and will be supported only for a short time. (Written as of beta for m31 of Chrome).

Custom Tiles for IE 11+ on Windows 8.1+

IE 11+ on Windows 8.1+ does offer a way to create pinned tiles for your site.

Microsoft recommends creating a few tiles at the following size:

Small: 128 x 128

Medium: 270 x 270

Wide: 558 x 270

Large: 558 x 558

These should be transparent images as we will define a color background next.

Once these images are created you should create an xml file called browserconfig.xml with the following code:

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

Save this xml file in the root of your site. When a site is pinned IE will look for this file. If you want to name the xml file something different or have it in a different location add this meta tag to the head:

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

For additional information on IE 11+ custom tiles and using the XML file visit Microsoft's website.

Putting it all together:

To put it all together the above code would look like this:

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

If a user is using a Windows Phone they can pin a website to the start screen of their phone. Unfortunately, when they do this it displays a screenshot of your phone, not a favicon (not even the MS specific code referenced above). To make a "Live Tile" for Windows Phone Users for your website one must use the following code:

Here are detailed instructions from Microsoft but here is a synopsis:

Step 1

Create a square image for your website, to support hi-res screens create it at 768x768 pixels in size.

Step 2

Add a hidden overlay of this image. Here is example code from 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>

Step 3

You then can add thew following line to add a pin to start link:

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

Microsoft recommends that you detect windows phone and only show that link to those users since it won't work for other users.

Step 4

Next you add some JS to toggle the overlay visibility

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

Note on Sizes

I am using one size as every browser will scale down the image as necessary. I could add more HTML to specify multiple sizes if desired for those with a lower bandwidth but I am already compressing the PNG files heavily using TinyPNG and I find this unnecessary for my purposes. Also, according to philippe_b's answer Chrome and Firefox have bugs that cause the browser to load all sizes of icons. Using one large icon may be better than multiple smaller ones because of this.

Further Reading

For those who would like more details see the links below:

• Wikipedia Article on Favicons
• The Icon Handbook
• Understand the Favicon by Jonathan T. Neal
• rel="shortcut icon" considered harmful by Mathias Bynens
• Everything you always wanted to know about touch icons by Mathias Bynens

这篇关于HTML 5 Favicon - 支持吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！