HTML 5网站图标 - 支持？ [英] HTML 5 Favicon - Support?

查看：361
本文介绍了HTML 5网站图标 - 支持？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在读维基百科的网站图标的页面。他们提到了HTML 5规范的网站图标：

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

目前HTML5规范建议在使用属性多种尺寸大小指定图标相对标签内=图标大小=图标的尺寸空间分隔的列表。 [源]多图标格式，包括容器格式，如微软.ICO和Macintosh .icns文件，以及可伸缩向量图形可通过包括在类型=文件内容类型的形式的图标的内容类型的标签内设置

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.

纵观引用的文章（W3），他们表现出这个例子：

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

我的问题是做任何浏览器都支持HTML 5的方法？

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

注：我知道苹果使用他们的苹果触摸图标元标记方法在HTML5法

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

维基百科的文章声称：

谷歌Chrome网络浏览器但是，将选择从HTML头提供的最匹配的大小来创建128×128像素的应用程序图标，当用户从工具菜单中选择创建应用程序快捷方式...

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网页图标是否正确？ （没有引用来源为Chrome确认这一点。）

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

在搜索我没能真正找到比Wikipedia文章其它HTML 5的网站图标（可信的）信息。

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.

第一（当然）是IE浏览器。 IE不支持PNG网站图标，直到版本11所以我们的第一行是在IE 9及以下网站图示条件注释：

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

要覆盖图标的用途在32x32像素创建它。注意的rel =快捷方式图标 IE浏览器来识别它需要的字快捷方式这不是标准的图标。此外，我们的包装 .ICO 图标在IE条件注释，因为Chrome和Safari浏览器将使用 .ICO 文件，如果为present，尽管其他选择，不是我们想什么。

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.

上面覆盖IE高达IE 9 IE 11接受PNG网站图示，但是，IE 10不。同时IE 10不读条件注释从而IE 10将不会显示一个图标。随着IE 11和可用的边缘我没有看到IE 10 wides $ P $垫使用，所以我忽略了这个浏览器。

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

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

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

使用的rel =苹果触摸icon- precomposed将无法在iOS书签时应用反射光泽。有iOS的应用大放异彩使用的rel =苹果触摸图标。此图标的大小应180x180像素，这是目前的规模由苹果最新的iPhone和iPad建议。我已阅读黑莓手机也将使用的rel =苹果触摸icon- precomposed。

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

作为一个说明：Android版Chrome规定：

As a note: Chrome for Android states:

在苹果触摸*是德precated，并且将很短的时间，才支持。 （写测试版Chrome浏览器的M31的）。

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

自定义瓷砖为IE 11+的Windows 8.1 +

IE 11+在Windows 8.1+确实提供了一种方式来为您的网站创建固定瓷砖。

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

Microsoft建议在以下尺寸创建一些瓷砖：

Microsoft recommends creating a few tiles at the following size:

小：128×128

中：270×270

宽：558点¯x270

Wide: 558 x 270

大：558点¯x558

Large: 558 x 558

这些应该是透明的图像，我们将定义下一个彩色背景。

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

一旦这些图像被创建，你应该创建一个名为xml文件 browserconfig.xml 通过以下code：

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>

在您的网站的根目录下保存该XML文件。当网站被固定IE会寻找这个文件。如果你想命名xml文件不同的东西还是有它在不同的位置这个元标记添加到头：

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

有关IE 11+定制的瓷砖和其他信息使用XML文件的访问Microsoft的网站。

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

全部放在一起：

要把它放在一起上面code是这样的：

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的活的瓷砖

如果用户使用的是Windows手机，他们可以固定一个网站到手机的启动画面。不幸的是，这样做的时候，他们会显示您的手机，而不是一个图标（甚至没有具体的MS code上面引用）的屏幕截图。做一个动态磁贴为Windows Phone用户为你的网站必须使用以下code：

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:

<一个href=\"http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/10/19/creating-a-custom-tile-to-link-to-your-website.aspx\">Here来自微软的详细说明，但这里是一个梗概：

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

的第1步的

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

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

的第2步的

添加此图像的叠加隐患。这里是例如code微软：

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>

的第3步的

您可以再添加thew下面一行添加一个引脚开始链接：

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建议您检测的Windows Phone，并只显示链接到这些用户，因为它不会对其他用户的工作。

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

的第4步的

接下来您可以添加一些JS切换覆盖知名度

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>

在尺寸注意

我使用一个大小为每个浏览器会缩小图像是必要的。我可以添加更多的HTML如果需要对那些具有较低的带宽指定多个大小，但我已经融为一体$ P $巨资pssing的PNG文件使用 TinyPNG 我觉得这是不必要的，我的目的。此外，根据 philippe_b 的答案 Chrome和Firefox有导致浏览器加载图标各种规模的bug。使用一个大图标可能会比多次小的，因为这更好的。

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网站图标 - 支持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆