<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="maskIcon.svg" color="#90FF00">
<link rel="shortcut icon" href="favicon.ico">

SVG FIRST!
I also suggest you get a good SVG editor that has a proper stripping/minimized save feature. For this I like to use Inkscape:
https://inkscape.org

Instead of serving dozens of icons, all you need is just five icons and one JSON file.

In your HTML, for the browser:

<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

And in your web app manifest:

// manifest.webmanifest
{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}