免责声明:我是RealFaviconGenerator的作者，我希望它是最新的(主要见下文).所以，如果这个答案与RFG生成的结果相符，也不要感到惊讶.

The one-size-fits-all myth

没有"一刀切"的图标.您不能创建一个SVG图标并期望它在所有地方都能工作.

从技术Angular 来看，单个SVG图标是一件好事.但从UI和UX的Angular 来看，这不是理想的结果.比较iOS和Android.在iOS上，所有主屏幕图标都是圆角正方形(iOS fills transparent regions of Touch icons with black).在Android上，主屏图标通常使用非正方形和透明度(包括谷歌应用程序图标).提交一个单点触控图标，Android Chrome就会使用它.但是你不能匹配Android icon guidelines，而专用图标可以.

因此，我建议故意避免使用单一图标.在可能的情况下，最好是分别针对每个平台(情况并不总是如此).

Icons, platform per platform

iOS Safari

iOS Safari预计会有touch icon分.到今天为止，这是一张180x180的PNG图像.此图像不应使用透明度，当添加到主屏幕时，其角将自动变圆.使用以下方式声明:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

多年来，这个图标已经成为很多浏览器的"默认高分辨率图标".因此，当您添加到书签时，您会在其他地方找到它，等等.

Android Chrome

Android Chrome依赖于Web App Manifest.虽然这个 list 不是专门针对Android Chrome的，但它目前是它的主要支持者.因此，目前仍然可以很安全地认为Web App Manifest中的图标是针对Android Chrome的.

顾名思义，Web App Manifest是针对Web应用程序的.但是任何网站都可以使用它作为引用某些图标的方式.

Android期望一个192x192的PNG图标，允许并鼓励透明.

声明 list 时包含:

<link rel="manifest" href="/icons/site.webmanifest">

EDGE和IE 12

微软推出了browserconfig，这是一个XML文档，列出了适合Metro UI的各种图标.

文件和background color声明为:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

classic 桌面浏览器

Windows/MacOS Chrome、Windows/MacOS Firefox、Safari、IE.这是我们的情况有点模糊.在历史上，只有一个favicon.ico文件，仍然受支持.然而，最新的浏览器更倾向于 Select 较轻的PNG图标.另外，一些浏览器无法在ICO文件中 Select 合适的图标(此格式可以嵌入多个版本的图标)，导致低分辨率图标被错误使用.

人们可能会忍不住完全放弃旧的favicon.ico美元.虽然我想在RFG中实现这一飞跃，但我没有运行必要的测试来判断对旧浏览器的影响.

因此，我今天仍然推荐使用favicon.ico个嵌入16x16、32x32和48x48图标的组合:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

其他浏览器

其他浏览器可能有专用图标.例如Coast by Opera is looking for a 228x228 icon.关注这些浏览器的必要性并不明显.当他们找不到"他们的"图标时，通常会使用touch 图标或其他图标.

Conclusion

正如一开始宣布的那样，这正是RealFaviconGenerator所创造的.