As for the rest, welcome to distributed systems. Any time you're working on something which involves multiple codebases on different schedules you're going to have a crossover period. For the web that period is measured in years since it has many clients and billions of users.
The article covers this but if you look at the data (https://caniuse.com/link-icon-svg) there are really only two things you need:
1. An SVG icon for modern browsers
2. favicon.ico for everyone else
If you want to support higher resolution icons for Safari's pinned tabs or iOS/Android you can add those as well but that's an optimization for new way to interact with web apps which those device makers added and isn't necessary unless you expect lots of people to use that feature and your existing icon color scheme clashes with the system UI.
If you are adding PWA support to your site and don't like the way your default icon displays on some devices, you have to add one more line of HTML and one small JSON file. That is more work but it's a fraction of a percent of the work which you will need to do to make a PWA for all but the most trivial sites.
This packs far more information into the 48x48 (or whatever resolution) then trying to squeeze in a title like "Am" or "Ha" for Amazon or HN.
(Totally agree on the complexity, seems like it followed the iOS Store model of interface design!)
