Most sites should just need one low-res (32px) and one high-res (192px) icon; re-use the high-res icon as an apple-touch-icon (it's supposed to be 180px, but 192px is close enough) and you're good to go.
It's important to remember that you're not just targeting browsers; lots of other software needs to parse site icons. Fancy messengers (Signal, Element, Discord, iMessage, WhatsApp), bookmarking clients, search engines, social media widgets, etc. all parse and display icons, and not all of them support SVG. Some RSS readers show thumbnails; they will only use `<link rel="icon">`, and select the higher-res icon if it's available.
Chromium DevTools has an "Application" pane that lets you preview your icon in the minimal safe clipping area; if it looks too crowded, you can specify an alternate maskable icon (unrelated to mask-icon) in your application's webmanifest with `purpose: maskable`.
Since that commit, I added a monochrome icon (same as mask-icon) and 512px icon (since not all programs handle svg well). Although it isn't exactly an icon, I also added an Open Graph image for all the programs that use it.
it's supposed to be 180px, but 192px is close enough
The compromise you're willing to accept to save yourself the 2 minutes necessary to make a second file shouldn't really be a recommendation for others. Plenty of icons will end up with compression artefacts if you don't make a specific 180px version properly. Browsers and OSes are terrible at image scaling.
Icons are rarely rendered at their intended size; there's a good chance that your browser doesn't render favicons at exactly 16px/32px, and a slim minority of Android phones have homescreen icons that are exactly 192px/500px.
This is why it's important to design icons that look good when passed through a variety of downscaling algorithms, and to test with other browsers/devices to make sure the icon comes out right.
Clients that download multiple icons can re-use cached icons with the same URL, which is why I re-used the 192px icon as the apple-touch-icon and re-used the mask-icon as the webmanifest's monochrome icon. Of course, I tested it to make sure it looked good when downscaled.
I made this icon specifically to have a tiny footprint (176 byte 32px favicon, 785 byte 192px icon) and to look good at just about any resolution when downscaled from the original, even on an e-ink display. I admit that my approach is a bit extreme, but most sites would benefit from something similar.
The nice thing about using Inkscape like that is you can easily loop it and generate a number of icon sizes. Since they'll be rendered at the size specified there's no scaling artifacts. An icon might look bad because it's too busy for a 16x16 square but at least your colors won't bleed too badly.
There’s still a use case for different presentations at different resolutions. SVG can certainly address that with existing standards, but I doubt the zillion different icon formats will coalesce on a common spec within SVG. Probably the best hope is a manifest of identifiers/refs within a single SVG file.
Tip: the ico can just be a renamed PNG file.
I wish people stopped cluttering their sites with a thousand useless variations.
The SVG favicon part is interesting and maybe that requires the 2 rel=icon tags.