Favicons-最佳做法 [英] Favicons - Best practices

问题描述

我正在努力寻找Favicon，Touch图标以及现在的Tile图标所需的所有这些不同大小和格式.

I'm trying to get my head around all these different sizes and formats that are needed for Favicons, Touch icons and now Tile icons too.

我已经阅读了这篇文章: http://www.jonathantneal.com/blog/understand-the-favicon 但是我仍然不清楚在所有使用> = IE8的设备和浏览器上应该使用什么的确切用法.

I've read this post: http://www.jonathantneal.com/blog/understand-the-favicon but I'm still a bit hazy on exactly what to use that will look reasonably good on all devices and browsers >= IE8.

我认为我应该创建以下内容:

I think I should create the following:

ICO
favicon.ico(32x32)

ICO
favicon.ico (32x32)

PNG
favicon.png(96x96)

PNG
favicon.png (96x96)

平铺图标
tileicon.png(144x144)

Tile Icon
tileicon.png (144x144)

Apple Touch图标
基于此 https://github.com/的apple-touch-icon-precomposed.png(152x152)
h5bp/html5-boilerplate/issues/1367

Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)
based on this https://github.com/h5bp/html5-boilerplate/issues/1367

...然后使用此代码为他们服务?

...and then use this code to serve 'em up?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

我想念什么吗?

我不清楚这是否涵盖IE 10?

I'm not clear whether this will cover IE 10?

推荐答案

Favicon比听起来更复杂. 10年前，favicon.ico是唯一需要的项目.然后是触摸图标，然后是由于各种iOS设备屏幕分辨率而导致的多个触摸图标，然后是Windows的平铺图标...

Favicon is way more complex than what it sounds. 10 years ago, favicon.ico was the only needed item. Then, there was the touch icon, then multiple touch icons dues to the various iOS devices screen resolutions, then there was the tile icon for Windows...

这里的一些答案非常全面-令人不知所措(所有这些，仅用于收藏夹图标?).但是，它们未能表明建议使用建议使用Windows的310x310平铺图标为558x558 .而且由于它们是几个月前撰写的，因此他们没有提及最近的 Android Chrome M39的清单或<一个href ="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html">在OS X El Capitan上Safari的固定标签SVG图标.

Some answers here are very comprehensive - and overwhelming (all this, only for a favicon?). Yet, they fail at indicating that the 310x310 tile icon for Windows is recommended to be 558x558. And since they were written a few months ago, they do not mention the recent manifest for Android Chrome M39 or the pinned tab SVG icon for Safari on OS X El Capitan.

每个平台的设计是另一个困难而又被忽略的话题.例如，收藏夹图标通常是透明的.但是iOS不支持透明性(例如，请比较 SO触摸图标以及在iPhone主屏幕上添加SO时会得到什么.

Per-platform design is another tough, yet neglected topic. For example, favicon are often transparent. But iOS does not support transparency (for an example of this, compare the SO touch icon and what you get when you add SO to your iPhone's home screen).

由于这些原因，我认为favicon的最佳做法是不手动创建它.而是使用一种工具来自动化整个过程并执行平台准则.

For these reasons, what I consider a best practice for favicon is to not create it manually. Instead, use a tool to automate the whole process and enforce platform guidelines.

我建议您使用 RealFaviconGenerator .它会生成完成工作所需的所有图片和HTML代码:

I advice you to use RealFaviconGenerator. It generates all pictures and HTML code you need to get the job done:

桌面浏览器的
• favicon.ico和PNG图标
• 适用于iOS和Android设备的Apple touch图标
• Windows 8磁贴
• 在OS X El Capitan上Safari的固定选项卡图标

• favicon.ico and PNG icons for desktop browsers
• Apple touch icon for iOS and Android devices
• Windows 8 tiles
• Pinned tab icon for Safari on OS X El Capitan

例如，它不仅生成msapplication-TileImage图片和标记，还生成IE11支持的更新的browserconfig.xml文件.它也在几个月前进行了更新，以支持Android Chrome清单和Safari OS X El Capitan.

For example, it not only generates the msapplication-TileImage picture and markup but also the more recent browserconfig.xml file supported by IE11. It was also updated a few months ago to support the Android Chrome manifest and Safari OS X El Capitan.

完全公开:我是该网站的作者.

Full disclosure: I'm the author of this site.

这篇关于Favicons-最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！