最小可行Favicon代码 [英] Minimum Viable Favicon Code

问题描述

我很担心在大多数手机和浏览器上使用favicons的最简单方法。

I'm confused about what's the simplest way to get favicons working on the majority of handsets and browsers.

1）某些网站表明它足以使用：

1) Some sites suggest that it is enough to use:

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

这适用于iOS 8，应该由Android，BlackBerry，Windows等提供。

That will work for iOS 8, and should be picked up by Android, BlackBerry, Windows, etc.

2）其他网站坚持每一个可能的图标必须明确指定：

2) Other sites insist that every single possible favicon must be explicitly specified:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

3）这个答案说你只需要：

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

以上哪项会以最少的努力覆盖大多数浏览器/手机？

Which of the above is going to cover the most browsers / handsets with the minimum amount of effort?

推荐答案

解决方案3中的代码是正确但过时的。 iOS 7中已弃用预组合触摸图标和 Android Chrome不再支持196x196图标，但是192x192 （它真的不会使用192x192以上的任何内容;完全披露：我是这篇文章的作者。）

The code in solution 3 is correct but outdated. Precomposed Touch icons were deprecated in iOS 7 and Android Chrome does not support 196x196 icons anymore, but 192x192 (it really won't use anything above 192x192; full disclosure: I'm the author of this article).

所以：

<!-- 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" href="/path/to/apple-touch-icon.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 192x192 pixels in size. -->
<link rel="icon" href="/path/to/favicon.png">

如果你可以放置 favicon.ico in网站的根目录，你甚至可以跳过它的声明，因为IE按惯例查找 /favicon.ico 。

If you can place favicon.ico in the root of the web site, you can even skip its declaration, since IE looks for /favicon.ico by convention.

这篇关于最小可行Favicon代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！