Favicon标准-2021-svg、ico、png和尺寸？

Question

到2021年应该使用哪些favicon维度、文件格式和meta/link标记？这包括苹果图标、windows、android等人们今天使用的设备。

我使用Opera并且我可以看到它支持svg格式。现在使用svg是最好的解决方案吗？有没有“一档通吃”的选项？

我已经浏览了很多网站，检查了不同的“favicon生成器”。他们都是岁以上的，大部分工作与png文件。

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

请提供尺寸，文件格式和元/链接标签应该使用的favicons。

Answer 1

免责声明：我是RealFaviconGenerator的作者，我希望它是最新的（主要，见下文）。因此，如果这个答案与RFG生成的内容匹配，请不要感到惊讶。

没有“一刀切”的图标。您不能创建单个SVG图标并期望它在任何地方都能工作。

从技术角度来看，单个SVG图标将是一件好事。但从UI和UX的角度来看，这并不是一个理想的结果。比较一下iOS和Android。在iOS上，所有主屏幕图标都是圆角的正方形（iOS将触控图标的透明区域用黑色填充）。在Android上，主屏幕图标经常使用非正方形形状和透明度（包括谷歌应用程序图标）。提交单个触摸图标，Android Chrome就会使用它。但是你将无法匹配Android图标指南，而专用图标可以。

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

Android Chrome依赖于Web应用程序清单。虽然这个清单并不是AndroidChrome专用的，但它是目前它的主要支持者。所以目前，认为Web应用清单中的图标是为Android Chrome提供的还是很安全的。

顾名思义，Web应用程序清单是针对Web应用程序的。但任何web站点都可以使用它作为引用某些图标的方式。

Android需要一个192x192PNG的图标，允许并鼓励透明。

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

文件和背景颜色声明为：

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

Windows/MacOS Chrome,Windows/MacOS Firefox,Safari,IE...事情变得更模糊了。历史上，只有一个favicon.ico文件，但仍受支持。然而，大多数最新的浏览器更喜欢选择PNG图标，因为它更轻。另外，一些浏览器无法在ICO文件中选择合适的图标（这种格式可以嵌入一个图标的多个版本），导致低分辨率图标被错误使用。

您可能会想要完全删除旧的favicon.ico。虽然我很想在RFG中实现这一飞跃，但我没有运行必要的测试来评估对旧浏览器的影响。

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