What's in the favicon zip
favicon.ico holds 16, 32 and 48 pixel versions in one file, the classic icon that browsers look for at the root of a site. favicon-16.png, favicon-32.png and favicon-48.png are the same sizes as separate PNGs. apple-touch-icon.png is 180 × 180 for iPhone and iPad home screens, and android-192.png and android-512.png cover Android and other places that want larger icons.
Padding, corners and background
Padding adds space around your artwork, from 0 to 30% per side, starting at 4%. Corner radius rounds the icon from square (0%) to a circle (50%). Background can be transparent, white, dark or a blue accent. The preview tile and the size grid update as you change them, so you can see how the 16 pixel version holds up.
The Apple touch icon is always made opaque, using your background color or white, because iOS fills transparent areas with black.
Adding the favicon to your site
Unzip the files into the root folder of your site, then paste the snippet shown on the page into the head of your HTML. It links favicon.ico, the 32 and 16 pixel PNGs and the Apple touch icon. Browsers cache favicons heavily, so if the old icon keeps appearing, open the icon file directly or try a private window. If you are building an installable web app with a manifest, the PWA Icon Generator adds a maskable icon and the manifest entries.
Designing for 16 pixels
A favicon is tiny on a browser tab. A full logo with a wordmark becomes an unreadable smudge, so use a symbol, monogram or single letter with strong contrast. Start from a square source of at least 512 pixels; the tool warns you if your image is smaller. SVG logos are rendered at 1024 pixels first, so they stay crisp.