Minimal example:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Example that includes for Apple and Android (via Evil Martians):

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

And the manifest:

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

If there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used.

developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

Creating a favicon

Favicon Generator: https://www.favicon.cc/

WordPress plugin: https://wordpress.org/plugins/favicon-by-realfavicongenerator/

Generator as used by above plugin: https://realfavicongenerator.net/

https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

Online Favicon Generator www.favicon.software

Change on browser tab switching

const favicon = document.querySelector('link[rel="icon"]')

document.addEventListener("visibilitychange", () => {
    const hidden = document.hidden

    favicon.setAttribute(
        "href", 
        `/favicon${hidden ? "-hidden" : ""}.ico`
    )
})

Credit: Change favicon on switching browser tabs in JavaScript