1 · Add your logo
2 · Options
Shown under the icon when someone adds your site to their home screen. Keep the short name to about 12 characters.
Where you will upload the files. The site root is best: some browsers look for /favicon.ico there without being told.
3 · Your icons
Which favicon files you need
Older guides list a dozen or more icon sizes. Today six files cover every browser and phone: favicon.ico for browsers that ask for it by name, icon.svg for sharp tab icons in current browsers, a 180 px apple-touch-icon.png for iPhones and iPads, and 192 px, 512 px and maskable 512 px PNGs for Android, listed in a small manifest.webmanifest file.
The generator makes all of them from one logo and writes the four <link> tags that point to them. Upload the files, paste the tags into your <head>, and you’re done.
Start from an SVG if you can
An SVG logo is drawn fresh at every size, so the 16 px tab icon stays crisp instead of being a blurry shrunk copy of a large image. It also lets you ship icon.svg, which current browsers prefer over the ICO. A PNG works too. Use a square one at least 512 px wide.
Logos with a wordmark rarely work at 16 px. If yours has one, try just the symbol.
Transparent tab icon, solid home screen icon
A transparent favicon sits on whatever the browser tab is, light or dark, so check the preview in both. Home screen icons are different: iOS fills transparent areas with black, and Android crops icons to its own shapes. That’s why the app icons always get a background color, with padding around the logo, and the maskable icon keeps your logo inside the central 80% that Android never crops.
Questions
Is my logo uploaded?
No. Every icon is drawn with the Canvas API inside this page, and the ICO file is assembled in your browser too. Your logo never leaves your device.
Where do the files go?
The site root is best, next to your home page. Some browsers and feed readers request /favicon.ico without reading your HTML, so keep a copy there even if the rest go in a folder.
I use WordPress. Do I need this?
WordPress has its own Site Icon setting, under Settings, then General. It makes PNG icons in a few sizes from one square image, but no SVG or maskable icon. Use the generator when you want the full set, and add the tags with your theme or a header plugin.