It has been over a decade since I have dealt with favicons, but this site's original source did an excellent job supporting many browsers. Setapp for Mac often has many little utilities, and searching for favicon, they had Image2icon, so I went ahead and tried it.

1. I started with a screen-capture of a section of n-so.com and pasted it into Image2Icon on the Create screen:

2. Select Icon Template. Big Sur App in my case.

3. Then select Export and Favicon

Which generates the following icons:

And the tool also generates an index.html with the link to the icons. Which I just moved to the _document.tsx file of this project:

        {/* For old IEs */}
        <link rel="shortcut icon" href="/static/favicons/ns/favicon.ico" />
                
        {/* For new browsers - multisize ico  */}
        <link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="/static/favicons/ns/favicon.ico" />
        
        {/* For iPad with high-resolution Retina display running iOS ≥ 7: */}
        <link rel="apple-touch-icon" sizes="152x152" href="/static/favicons/ns/favicon-152-precomposed.png" />
        
        {/* For iPad with high-resolution Retina display running iOS ≤ 6: */}
        <link rel="apple-touch-icon" sizes="144x144" href="/static/favicons/ns/favicon-144-precomposed.png" />
        
        {/* For iPhone with high-resolution Retina display running iOS ≥ 7: */}
        <link rel="apple-touch-icon" sizes="120x120" href="/static/favicons/ns/favicon-120-precomposed.png" />
        
        {/* For iPhone with high-resolution Retina display running iOS ≤ 6: */}
        <link rel="apple-touch-icon" sizes="114x114" href="/static/favicons/ns/favicon-114-precomposed.png" />
        
        {/* For iPhone 6+ */}
        <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/ns/favicon-180-precomposed.png" />
        
        {/* For first- and second-generation iPad: */}
        <link rel="apple-touch-icon" sizes="72x72" href="/static/favicons/ns/favicon-72-precomposed.png" />
        
        {/* For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: */}
        <link rel="apple-touch-icon" sizes="57x57" href="/static/favicons/ns/favicon-57.png" />
        
        {/* For Old Chrome */}
        <link rel="icon" sizes="32x32" href="/static/favicons/ns/favicon-32.png"  />
        
        {/* For IE10 Metro */}
        <meta name="msapplication-TileColor" content="#FFFFFF" />
        <meta name="msapplication-TileImage" content="favicon-192.png" />
        <meta name="theme-color" content="#ffffff" />

Note For some reason, Image2icon did not generate the favicon-144.png while still including the reference in the generated index.html file.

Let me know what tool you use!