自2019年起，应使用哪些favicon尺寸，文件格式和元/链接标记？这包括苹果图标，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">
请提供应使用哪些favicons的尺寸，文件格式和元/链接标签。
答案 0 :(得分：111)
免责声明：我是RealFaviconGenerator的作者，我希望它是最新的（主要见下文）。如果这个答案与RFG产生的答案相符，请不要感到惊讶。
没有＆＃34;一种尺寸适合所有＆＃34;图标。您无法创建单个SVG图标，并期望它可以在任何地方使用。
从技术角度来看，单个SVG图标将是一件好事。但从UI和UX的角度来看，这不是一个理想的结果。比较iOS和Android。在iOS上，所有主屏幕图标都是带圆角的正方形（iOS fills transparent regions of Touch icons with black）。在Android上，主屏幕图标通常使用非方形形状和透明度（包括Google应用程序图标）。提交单个触摸图标，Android Chrome将使用它。但是你不能匹配Android icon guidelines，而专用的图标可以。
所以我建议故意避免使用单个图标。而是在可能的情况下单独定位每个平台（情况并非总是这样）。
iOS Safari需要touch icon。截至今天，这是一张180x180的PNG图像。此图像不应使用透明度，并且在添加到主屏幕时其角将自动舍入。声明：
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
多年来，这个图标已经成为＆＃34;默认的高分辨率图标＆＃34;对于许多浏览器。因此，当您添加到书签等时，您会在其他地方找到它。
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">
尽管macOS Safari没有favicon，但它支持mask icon for pinned tabs。这是一个单色SVG图标和一个颜色，当标签处于活动状态时填充它。
用以下内容声明：
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">
Microsoft推出了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，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">
其他浏览器可能有专门的图标。例如Coast by Opera is looking for a 228x228 icon。需要关注这些浏览器并不明显。当他们找不到他们的＆＃34;他们通常会使用触摸图标或其他图标。图标。
正如开头所宣布的那样，这正是RealFaviconGenerator所创造的。
答案 1 :(得分：7)
值得一提的是，与favicon一起应添加一些其他标签，如OG标签，Twitter卡或MS应用程序。这一切都有同样的目的 - 视觉识别您的品牌，也应包括在内。
可以找到Twitter卡HERE
我添加了以下标签
<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">
我发现许多用户使用650px和jpg / png格式制作图像1300px。
添加所有代码后，应验证HERE
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 -->
我发现一些全球品牌在他们的网站上使用这个标签。一个尺寸为150x150像素和png格式。浏览器可以使用此图像在搜索结果中显示。
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
真正的Favicon Generator也涵盖了微软的影响力。 MS-application还有许多其他元标记可以优化弓形页面，并显示其他信息，如图像。这个话题也值得一读。
我希望这对某些人有用，并扩展品牌推广网站的主题。
答案 2 :(得分：3)
几周前我遇到了完全相同的问题。在互联网上找到有关收藏夹的可靠最新信息非常困难。事实上，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">
我还写了一篇blog post，其中有更多的散文和更多的背景信息。