blocks|key|3161110|text|我使用.ico格式，并在<head>元素中放入以下两行：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3161111|<link+rel="icon"+href="/favicon.ico"+type="image/x-icon"+/>
<link+rel="shortcut+icon"+href="/favicon.ico"+type="image/x-icon"+/>|code-block|syntax|javascript|3161112|entityMap^0|C|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I use .ico format and put the following two lines within the <code>&lt;head&gt;</code> element:

<pre><code>&lt;link rel="icon" href="/favicon.ico" type="image/x-icon" /&gt;
&lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /&gt;
</code></pre>

blocks|key|3374066|text|为了也支持平板电脑和智能手机的触摸图标，我更喜欢HTML5Boilerplate的方式|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3374067|有关触摸图标的更多信息，请访问this+article。|3374068|在浏览器支持的当前状态下，您甚至不必为文档中的favicon添加HTML标记。浏览器将自动搜索文件列表，对于iOS，请参阅以下示例：|3374069|如果在超文本标记语言中没有指定图标，iOS+Safari将在网站的根目录中搜索带有苹果触摸图标或苹果触摸图标前缀的图标。例如，如果设备的适当图标大小为57×57像素，则iOS将按以下顺序搜索文件名：|3374070|3374071|3374072|apple-touch-icon-57x57-precomposed.png|ordered-list-item|3374073|apple-touch-icon-57x57.png|3374074|apple-touch-icon-precomposed.png|3374075|apple-touch-icon.png|3374076|3374077|我的建议是，不要在你的文档中包含一个收藏图标，而是在根网站上准备一个文件列表：|3374078|3374079|apple-touch-icon-114x114-precomposed.png|unordered-list-item|3374080|apple-touch-icon-144x144-precomposed.png|3374081|3374082|apple-touch-icon-72x72-precomposed.png|3374083|3374084|apple-touch-icon.png+(57px*57px)|style|CODE|3374085|favicon.ico+HiDPI+(32x32px)|3374086|3374087|当你从html5boilerplate.com下载一个模板时，这些都包括在内，你只需要用你自己的图标来替换它们。|3374088|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md#favicons-and-touch-icon|1|http://mathiasbynens.be/notes/touch-icons|2|http://html5boilerplate.com/^0|O|G|0|0|F|C|1|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|L|B|0|C|F|0|0|3|K|2|0^^$0|@$1|2|3|4|5|6|7|1S|8|@]|9|@$A|1T|B|1U|1|1V]]|C|$]]|$1|D|3|E|5|6|7|1W|8|@]|9|@$A|1X|B|1Y|1|1Z]]|C|$]]|$1|F|3|G|5|6|7|20|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|21|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|22|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|23|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|24|8|@]|9|@]|C|$]]|$1|O|3|P|5|N|7|25|8|@]|9|@]|C|$]]|$1|Q|3|R|5|N|7|26|8|@]|9|@]|C|$]]|$1|S|3|T|5|N|7|27|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|28|8|@]|9|@]|C|$]]|$1|V|3|W|5|6|7|29|8|@]|9|@]|C|$]]|$1|X|3|-4|5|6|7|2A|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|10|7|2B|8|@]|9|@]|C|$]]|$1|11|3|12|5|10|7|2C|8|@]|9|@]|C|$]]|$1|13|3|M|5|10|7|2D|8|@]|9|@]|C|$]]|$1|14|3|15|5|10|7|2E|8|@]|9|@]|C|$]]|$1|16|3|R|5|10|7|2F|8|@]|9|@]|C|$]]|$1|17|3|18|5|10|7|2G|8|@$A|2H|B|2I|19|1A]]|9|@]|C|$]]|$1|1B|3|1C|5|10|7|2J|8|@$A|2K|B|2L|19|1A]]|9|@]|C|$]]|$1|1D|3|-4|5|6|7|2M|8|@]|9|@]|C|$]]|$1|1E|3|1F|5|6|7|2N|8|@]|9|@$A|2O|B|2P|1|2Q]]|C|$]]|$1|1G|3|-4|5|6|7|2R|8|@]|9|@]|C|$]]]|1H|$1I|$5|1J|1K|1L|C|$1M|1N]]|1O|$5|1J|1K|1L|C|$1M|1P]]|1Q|$5|1J|1K|1L|C|$1M|1R]]]]

To also support touch icons for tablets and smartphones I prefer the approach of <a href="https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md#favicons-and-touch-icon" rel="nofollow">HTML5Boilerplate</a>

More information on touch icons can be found in <a href="http://mathiasbynens.be/notes/touch-icons" rel="nofollow">this article</a>.

With the current status of browser-support you don't even have to add the HTML tag for the favicon in your document. The browsers will search automaticly a list of files, see this example for iOS:

<blockquote>
 If no icons are specified in the HTML, iOS Safari will search the
 website’s root directory for icons with the apple-touch-icon or
 apple-touch-icon-precomposed prefix. For example, if the appropriate
 icon size for the device is 57 × 57 pixels, iOS searches for filenames
 in the following order:
 
 <ol>
 <li>apple-touch-icon-57x57-precomposed.png</li>
 <li>apple-touch-icon-57x57.png</li>
 <li>apple-touch-icon-precomposed.png</li>
 <li>apple-touch-icon.png</li>
 </ol>
</blockquote>

My advise is to not include a favicon in your document, but have a list of files ready in the root website:

<ul>
<li>apple-touch-icon-114x114-precomposed.png</li>
<li>apple-touch-icon-144x144-precomposed.png</li>
<li>apple-touch-icon-57x57-precomposed.png</li>
<li>apple-touch-icon-72x72-precomposed.png</li>
<li>apple-touch-icon-precomposed.png</li>
<li>apple-touch-icon.png <code>(57px*57px)</code></li>
<li>favicon.ico <code>HiDPI (32x32px)</code></li>
</ul>

When you download a template from <a href="http://html5boilerplate.com/" rel="nofollow">html5boilerplate.com</a> these are all included, you just have to replace them with your own icons.

blocks|key|369471|text|Wikipedia+to+the+rescue|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|369472|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Favicon^0|0|N|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://en.wikipedia.org/wiki/Favicon" rel="noreferrer">Wikipedia to the rescue</a>

blocks|key|366070|text|IE6无法正确处理PNG，请注意。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|366071|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

IE6 cannot handle PNGs correctly, be warned.

blocks|key|3161130|text|Favicon必须是.ico+file才能在所有浏览器上正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3161131|现代浏览器还支持PNG和GIF图像。|3161132|我发现，一般来说，最简单的创建方法是使用免费的web服务，如favicon.cc。|3161133|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/ICO_%2528icon_image_file_format%2529|1|http://favicon.cc/^0|A|9|0|0|0|U|A|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

Favicon must be an <a href="http://en.wikipedia.org/wiki/ICO_%28icon_image_file_format%29" rel="nofollow noreferrer">.ico file</a> to work properly on all browsers.

Modern browsers also support PNG and GIF images.

I've found that in general the easiest way to create one is to use a freely available web service such as <a href="http://favicon.cc/" rel="nofollow noreferrer">favicon.cc</a>.

blocks|key|3161198|text|还有一个网站，你可以在那里查看任何页面的图标是如何制作的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3161199|getfavicon.org|offset|length|3161200|在那里你可以看到一个关于制作图标，图像类型和分辨率的教程，它很不错！|3161201|entityMap|0|LINK|mutability|MUTABLE|url|http://www.getfavicon.org/^0|0|0|E|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

There is also a site where you can check how the favicon of any page is made

<a href="http://www.getfavicon.org" rel="nofollow noreferrer">getfavicon.org</a>

There you can see a tutorial about making favicons, image types and resolutions, it's nice!

blocks|key|366372|text|大多数浏览器都会自动检测到根目录中有一个favicon.*。您可以通过使用以下命令来确保检测到它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|366373|+<link+rel="icon"+type="image/png"+href="/path/image.png"+/>|code-block|syntax|javascript|366374|就我个人而言，我使用的是.png图像，但大多数格式都应该可以使用。|366375|entityMap^0|K|9|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Having a <code>favicon.*</code> in your root directory is automatically detected by most browsers. You can ensure it's detected by using:

<pre><code> &lt;link rel="icon" type="image/png" href="/path/image.png" /&gt;
</code></pre>

Personally I use .png images but most formats should work.

blocks|key|364677|text|这个问题的答案已经变成了complicated+enough，最好的方法是使用像RealFaviconGenerator这样的工具，它可以让你上传一个png/jpg，然后为你生成覆盖所有平台的图标和代码：https://realfavicongenerator.net/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|364678|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/48969053/7343159|1|https://realfavicongenerator.net/^0|C|I|0|2U|X|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

The answer to this question has become <a href="https://stackoverflow.com/a/48969053/7343159">complicated enough</a> that the best way is to just use a tool like RealFaviconGenerator, which lets you upload a png/jpg and then generates favicons and code to cover all the platforms for you: <a href="https://realfavicongenerator.net/" rel="nofollow noreferrer">https://realfavicongenerator.net/</a>

What is currently the best way to get a favicon to display in all browsers that currently support it?

Please include:

<ol>
<li>Which image formats are supported by which browsers.</li>
<li>Which lines are needed in what places for the various browsers.</li>
</ol>

What is currently the best way to get a favicon to display in all browsers that support Favicons?

目前最好的方法是让一个收藏图标显示在当前支持它的所有浏览器中？请包括：对于不同的浏览器，在什么地方需要哪些browsers.Which行，支持哪些图像格式。

问目前让一个收藏图标在所有支持收藏图标的浏览器中显示的最好方法是什么？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问目前让一个收藏图标在所有支持收藏图标的浏览器中显示的最好方法是什么？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问目前让一个收藏图标在所有支持收藏图标的浏览器中显示的最好方法是什么？
EN