What a favicon actually is
A favicon is the small icon that represents your site in browser tabs, bookmarks, history and on mobile home screens. Modern sites don't ship just one favicon — they provide several sizes so each context gets a crisp icon, from a 16-pixel tab icon to a 512-pixel install icon.
The sizes you need
A solid favicon set covers the common targets:
- 16×16 and 32×32 — browser tabs and bookmarks
- 48×48 and 64×64 — Windows and higher-DPI tabs
- 180×180 — Apple touch icon for iOS home screens
- 192×192 and 512×512 — Android and PWA install icons
Start with the right source image
Favicons are tiny, so simplicity wins. Use a square, high-contrast image — a bold logo mark or a single letter reads far better at 16 pixels than a detailed photo. Provide the largest version you have (at least 512×512) so every downscaled size stays sharp.
Generate the full set locally
A favicon generator takes your one image, renders it at each required size with high-quality scaling, and bundles the results into a ZIP. Doing this in the browser means your logo — often unreleased branding — never gets uploaded. You drop the image, click generate, and download a complete icon pack.
Adding favicons to your site
Once you have the files, reference them in your HTML head with link tags for the icon sizes and an apple-touch-icon, and include the larger icons in a web app manifest for installable PWAs. Place the files where your site can serve them, and clear your cache to see the new icon.
One image, every size
You don't need a design suite to ship proper favicons. Start from a clean square logo, generate all the sizes at once in your browser, and drop the ZIP into your project — no upload required.
