Disclaimer: I am the author of RealFaviconGenerator, which I expect will be up to date (mostly see below). So don't be surprised if this answer matches what RFG generates.
The One-Size Myth for All
There is no one size fits all icon. You cannot create a single SVG icon and expect it to work everywhere.
From a technical point of view, a single SVG icon would be a good thing. But from the point of view of the user interface and UX, this is an undesirable result. Compare iOS and Android. In iOS, all home screen icons are rounded squares ( iOS fills the transparent areas of the Touch icons with black ). On Android, home screen icons often use non-square shapes and transparency (including Google application icons). Submit one touch icon and Android Chrome will use it. But you will not be able to comply with the rules for Android icons , while a highlighted icon may.
Therefore, I advise you to consciously avoid using a single icon. It is better to focus on each platform separately when possible (this is not always the case).
Icons, platform for each platform
iOS Safari
iOS Safari expects a touch icon . Today this is a PNG image of 180x180 size. This image should not use transparency, and its corners will automatically be rounded when added to the main screen. Declared using:
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
Over the years, this icon has become the "default high resolution icon" for many browsers. So you will find it elsewhere, when bookmarked, etc.
Android Chrome
Android Chrome uses the manifest of the web application . Although this manifesto is not dedicated to Android Chrome, it is currently its main proponent. Therefore, at present, you can still read the icons from the Manifesto of the Android Chrome web application.
As the name suggests, the web application manifest is for web applications. But any website can use it as a link to some icons.
Android expects the PNG icon 192x192, transparency is allowed and encouraged.
The manifest is declared using:
<link rel="manifest" href="/icons/site.webmanifest">
Edge and IE 12
Microsoft introduced browserconfig , an XML document that lists various icons that correspond to the Metro interface.
The file and background color are declared using:
<meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-config" content="/icons/browserconfig.xml">
Classic desktop browsers
Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... It was a bit blurry. Historically, there was one favicon.ico file that is still supported. However, most modern browsers prefer PNG icons, which are easier. In addition, some browsers cannot select the correct icon in the ICO file (this format may include several versions of the icon), which leads to incorrect use of the low-resolution icon.
One might be tempted to completely abandon the old favicon.ico . Although I would like to make this jump in RFG, I did not run the necessary tests to evaluate the impact on older browsers.
So the combo that I still recommend today with favicon.ico embeds 16x16, 32x32 and 48x48 icons:
<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">
Other browsers
Other browsers may have highlighted icons. For example, Coast by Opera is looking for the 228x228 icon . The need to focus on these browsers is not obvious. Usually they use a touch icon or other icons when they cannot find their own icon.
Conclusion
As announced at the beginning, this is exactly what RealFaviconGenerator creates.