What this makes, and where it goes
You get six PNGs (16, 32, 48, 180, 192 and 512 pixels), a favicon.ico holding the 16, 32 and 48 pixel images, the tags for your <head> and a site.webmanifest. The .ico stores each size as a PNG inside the file, a format Windows has supported since Vista and current browsers read. Upload the files to your site root and paste the tags. Letters are drawn at each size rather than shrunk from the big one, so they stay as sharp as a 16-pixel square allows.
- Google Search. Google asks for a square icon and recommends one larger than 48×48, on a stable URL, with both the file and your home page crawlable. Google shows one favicon per hostname, so subfolders can’t have their own.
- Web app manifest. web.dev says Chromium needs at least a 192×192 and a 512×512 icon for an installable app. The manifest here lists both. Field details are on MDN.
- Apple devices. Safari uses the icon from <link rel="apple-touch-icon"> when someone adds your site to the home screen. Apple’s example uses 180×180 for Retina iPhones.
Using Next.js?
The App Router has file conventions for icons. Put favicon.ico in the top level of app/, save the 32 or 512 PNG as app/icon.png and the 180 PNG as app/apple-icon.png. Next.js adds the <link> tags for you, so skip the tags above. For the manifest, save it as app/manifest.webmanifest (Next.js supports that name in the root of app/) and put the 192 and 512 PNGs in public/.
Design tips for 16 pixels
One or two letters read better than three. Use a bold weight and strong contrast; the tool warns under 4.5:1. Check the browser tab preview on both light and dark browser themes. A detailed logo usually needs a simpler mark at small sizes. Emoji are drawn with your device’s emoji font, so the result looks different if you make it on a Mac rather than on Windows.
Then make a matching share image with the OG image generator and check your tags with the Open Graph checker.