Favicon Standard - 2021 - svg, ico, png and dimensions?
Disclaimer: I'm the author of RealFaviconGenerator, which I expect to be up-to-date (mostly, see below). So don't be surprised if this answer matches what RFG generates.
The one-size-fits-all myth
There is no "one size fits all" icon. You can't 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 a UI and UX point of view, this is not a desirable outcome. Compare iOS and Android. On iOS, all home screen icons are squares with rounded corners (iOS fills transparent regions of Touch icons with black). On Android, home screen icons often use non-square shapes and transparency (including Google app icons). Submit a single touch icon and Android Chrome will use it. But you won't be able to match Android icon guidelines, whereas a dedicated icon could.
So I advice to deliberately avoid using a single icon. Rather target each platform individually, when possible (this is not always the case).
Icons, platform per platform
iOS Safari
iOS Safari expects a touch icon. As of today, this is a 180x180 PNG image. This image should not use transparency and its corners will be automatically rounded when added to home screen. Declared with:
<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 adding to bookmark, etc.
Android Chrome
Android Chrome relies on the Web App Manifest. Although this manifest is not dedicated to Android Chrome, it is currently its main supporter. So at the moment, it is still quite safe to consider the icons from the Web App Manifest to be for Android Chrome.
As the name suggests, the Web App Manifest is for, well, web apps. But any web site can use it as a way to reference some icons.
Android expects a 192x192 PNG icon, transparency allowed and encouraged.
The manifest is declared with:
<link rel="manifest" href="/icons/site.webmanifest">
Edge and IE 12
Microsoft introduced the browserconfig, an XML document which lists various icons that fit the Metro UI.
The file and background color are declared with:
<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... This is were things are a little more blurry. Historically, there was a single favicon.ico file, still supported. However, most recent browsers rather pick PNG icons, which are lighter. Plus some browsers are not able to select the proper icon in the ICO file (this format can embed several versions of an icon), leading a low resolution icon being wrongly used.
One could be tempted to drop the old favicon.ico entirely. Although I would like to make this leap in RFG, I didn't run the necessary tests to evaluate the impact on the old browsers.
Thus the combo I still recommend today, with favicon.ico embedding 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 dedicated icons. For example Coast by Opera is looking for a 228x228 icon. The need to focus on these browsers is not obvious. They usually use the touch icon or other icons when they cannot find "their" icon.
Conclusion
As announced at the beginning, this is exactly what RealFaviconGenerator creates.
It is also worth mentioning that together with favicon some other tags should be added like OG tags, Twitter cards or MS-application. It all serves the same purpose - visual identification of your brand and should also be included.
Twitter card can be found HERE
I add following tags
<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">
I found that many users make images 1300px by 650px and jpg/png formats.
After adding all tags they should be validated HERE
Facebook OG has more option but general are as follows:
<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 recommend specific ratio of the image and the file size is limited to 8Mb. To keep similar images with twitter card I recommend dimensions 1240px by 650px and jpg/png format. Facebook and twitter do not accept svg...
I found that some global brands use this tag on their websites. One had dimensions 150x150 pixels and png format. This image may be used by browsers to display in search results.
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon Generator covers also Microsoft favicons. There are many other meta tags for MS-application to optimize bow the page and other infos such as image are displayed. This topic is also worth reading.
I hope this is usefull for someone and expands the topic of branding your website.