截至2022年，应使用哪些favicon尺寸、文件格式以及元/meta/link标签？其中包括苹果图标、Windows、Android和其他人们今天使用的设备。
我使用Opera浏览器，它似乎支持svg格式。现在使用svg是最好的解决方案吗？是否有“一个文件适用于所有设备”的选项？
我浏览了许多网站并检查了不同的“favicon生成器”。它们全部都是几年前的版本，大多数只能处理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应用程序图标）。提交一个单独的touch icon，Android Chrome将使用它。但是您无法匹配Android图标指南，而专门的图标可以。
因此，我建议有意避免使用单个图标。尽可能针对每个平台进行设计（这并非总是如此）。
iOS Safari需要一个touch icon。截至今天，这是一个180x180的PNG图像。此图像不应使用透明度，并且添加到主屏幕时其角落将自动变为圆角。声明为：
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="manifest" href="/icons/site.webmanifest">
微软推出了browserconfig，这是一个XML文档，列出了适用于Metro UI的各种图标。
文件和background color声明为：
<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.ico），IE 会按照惯例找到它。因此，在这种特殊情况下不需要声明。将图标重新生成，路径设置为 /path/to/icons，这样声明就会出现了。 - philippe_b几周前我也有同样的问题。在互联网上找到可靠的最新信息关于网站图标是出奇的困难。实际上，MDN和W3C都链接到维基百科获取有关网站图标的更多信息。然而，维基百科文章相当短且不太有用。我花费了数小时研究现代浏览器最佳图标。
我学到的：
没有“一种文件适用于所有”解决方案。但是，对于现代浏览器，实际需要的并不多。
favicon.ico文件。我的建议是使用以下内容：
<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- For Google and Android -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
我还写了一篇博客文章，其中包含更多的散文和更多的背景信息。
值得一提的是，除了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">
我发现许多用户使用1300像素乘以650像素的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。为了与Twitter卡片保持相似的图像，我建议使用1240像素乘650像素的尺寸以及jpg/png格式。Facebook和Twitter不接受SVG格式的图片...
我发现一些全球品牌在其网站上使用此标签。其中一个标签具有150x150像素和png格式的尺寸。浏览器可以使用该图像在搜索结果中显示。
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon Generator同样涵盖了Microsoft的favicon。还有许多其他用于MS应用程序优化页面以及显示图像等其他信息的元标记。这个主题也值得一读。
我希望这对某人有用，扩展了关于品牌推广网站的主题。