截至2020年，应使用哪些网站图标尺寸，文件格式和元/链接标签？其中包括Apple图标，Windows，Android和当今人们使用的其他设备。

我使用Opera，可以看到它支持svg格式。是当今使用svg的最佳解决方案吗？是否有“一个文件可以容纳所有文件”的选项？

我浏览了许多网站，并检查了不同的“网站图标生成器”。他们都已经岁了，并且大多数使用png文件。

例如： ico和svg应该使用什么代码？

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

还是应该指定尺寸（如果ico包含更多尺寸）？我找不到一个好的答案。

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

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

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

千篇一律的神话

没有“一刀切”的图标。您无法创建单个SVG图标，并且不能期望它可以在任何地方使用。

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

因此，我建议您避免使用单个图标。尽可能地针对每个平台（并非总是如此）。

图标，每个平台的平台

iOS Safari

iOS Safari需要触摸图标。截至今天，这是一个180x180的PNG图片。此图像不应使用透明性，添加到主屏幕后其角将自动变圆。声明为：

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

多年来，此图标已成为许多浏览器的“默认高分辨率图标”。因此，添加到书签等时，您将在其他位置找到它。

Android Chrome浏览器

Android Chrome依赖于Web App Manifest。尽管此清单并非专用于Android Chrome，但目前是其主要支持者。因此，目前，将Web App Manifest中的图标用于Android Chrome还是很安全的。

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

Android希望使用192x192 PNG图标，允许并鼓励透明。

清单声明为：

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

Edge和IE 12

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

文件和背景色声明为：

<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上取得飞跃，但我没有进行必要的测试来评估对旧浏览器的影响。

因此，我今天仍然推荐使用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">

其它浏览器

其他浏览器可能具有专用图标。例如Opera的Coast正在寻找228x228的图标。关注这些浏览器的需求并不明显。当找不到“他们的”图标时，他们通常使用触摸图标或其他图标。

结论

如开始时所宣布的，这正是RealFaviconGenerator创建的。

还值得一提的是，应与favicon一起添加其他一些标签，例如OG标签，Twitter卡或MS应用程序。所有这些都具有相同的目的-视觉识别品牌，也应包括在内。

可以在这里找到Twitter卡

我添加以下标签

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

我发现许多用户制作的图片为1300px x 650px和jpg / png格式。

添加所有标签后，应对其进行验证 此处

Facebook OG有更多选择，但一般如下：

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook建议将图像的特定比例和文件大小限制为8Mb。为了使用推特卡保持相似的图像，我建议尺寸为1240px x 650px和jpg / png格式。Facebook和Twitter不接受svg ...

我发现一些全球品牌在其网站上使用此标签。一种尺寸为150x150像素和png格式。浏览器可以使用此图像显示搜索结果。

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator还包括Microsoft图标。还有许多其他用于MS应用程序的元标记可优化弓形页面，并显示其他信息，例如图像。这个话题也值得一读。

我希望这对某人有用，并扩展了您网站品牌的主题。