What is a favicon, and what size should it be?
A favicon is the small icon in a browser tab, bookmark list and home-screen shortcut. Ship three sizes: 32×32 for the browser tab, 180×180 as the Apple touch icon, and 512×512 for the web app manifest. PNG is fine — the old ICO format is only needed for very old versions of Internet Explorer.
The sizes, and what each is for
32×32 is the tab icon on desktop and the one people see constantly. 180×180 is what iOS uses when a page is added to the home screen. 512×512 feeds the web app manifest and Android install prompts. 16×16 is legacy and browsers will downscale the 32 adequately.
Modern browsers pick the right one from your HTML, so shipping all three and letting them choose is correct — there is no need to detect anything.
Designing something readable at 32 pixels
A full logo almost never works. At 32 pixels you have room for one letter, one simple shape, or one strong silhouette. Take the most distinctive element of the brand and drop everything else.
Contrast matters more than detail, and remember the icon will sit on both light and dark browser chrome. Test it against both before shipping.
Why yours might not be updating
Favicons are cached unusually aggressively, often beyond a normal hard refresh. Load the icon URL directly in a tab to confirm the new file is actually being served, then clear the site data rather than assuming the deployment failed.