A favicon is still more than one file
The little icon in the browser tab is drawn from a set: a multi-resolution favicon.ico that old browsers and Windows still request by name, PNGs at 16, 32, 48 and larger for tabs and bookmarks, a 180×180 Apple touch icon for "Add to Home Screen" on iPhones, and 192 and 512 pixel icons for Android's home screen and the web app manifest. Provide only one and every other context gets a badly scaled version — or the default globe.
This generator makes the whole set from one square image and writes the <link> tags that reference them. Drop the files in your site's root, paste the tags into <head>, done.
One logo, two icons
If you are making your website into an app, the site's favicon and the app's launcher icon are the same brand at two sizes, and they should be made from the same source. People find the app on their home screen by recognising the site; a favicon that is one thing and an app icon that is another costs you that recognition. Use the same 1024×1024 logo here and in the app icon generator, with the same background colour, and both sets match.
Padding and background work as they do for app icons: the background fills behind transparent or non-square artwork, and padding keeps a logo that touches the edges from being clipped by macOS's and Android's rounded masks.
Google, search results and the app
Google shows your favicon next to your site in mobile search results, and it has rules: the icon must be square, at least 48×48, a multiple of 48, and reachable at a stable URL. The 48 px PNG this tool generates satisfies them. Inside a website app the favicon is not shown — the launcher icon takes its place — but the app's WebView still fetches it on every page, so a missing file is a 404 on every screen. Ship the set and forget about it.