How to generate favicons
- Drop in a square image of at least 512 pixels, larger is fine, smaller will look soft.
- Decide whether to keep transparency or composite onto a background colour.
- Press Generate icons and review the eight sizes produced.
- Download them all as a ZIP and put them in your site root.
- Copy the HTML snippet into the head of every page.
What gets generated
- 16, 32, 48 and 96 pixel icons for browser tabs and shortcuts.
- A 180 pixel apple-touch-icon for the iOS home screen.
- 192 and 512 pixel icons for Android and progressive web apps.
- A 144 pixel Windows tile icon.
- Centre-cropping to square, so a non-square source still works.
- The HTML snippet ready to paste, with correct rel and sizes attributes.
Why one favicon is not enough any more
A favicon used to be a single 16-pixel image. Now the same site icon appears in a browser tab, a bookmark bar, a mobile home screen, a Windows tile, a PWA splash screen and search results, each at a different size and with different expectations.
Supplying only a 16-pixel icon means every larger use scales it up, which looks soft and amateurish next to competitors who supplied the right sizes. Supplying only a 512-pixel icon means the browser scales it down to 16, where fine detail turns to mush.
Design for the smallest size first
At 16 pixels you have 256 pixels in total. A full logo with a wordmark is illegible; a detailed illustration becomes a smudge. What works is a single strong shape, a letter, a simple mark, a distinctive silhouette, with high contrast against both light and dark tab backgrounds.
The test is simple: shrink your candidate to 16 pixels and look at it at actual size. If you cannot tell what it is, neither can anyone else, and no amount of detail at 512 pixels compensates.
Transparency, and where it fails
- Browser tabs handle transparency correctly on both light and dark themes.
- iOS home screen ignores it and composites onto black, which can make a dark logo vanish.
- Android handles it, but adaptive icons may crop the edges.
The safe approach is a solid background colour for the apple-touch-icon and transparency elsewhere. This generator applies your choice across the set, so if iOS matters, pick a background that suits your mark.
PNG rather than .ico
The traditional favicon format was .ico, a Windows container holding several resolutions in one file. Every browser released in the past decade accepts PNG favicons, and PNG is simpler to produce and easier to inspect.
The only reason to want .ico now is support for genuinely ancient versions of Internet Explorer. If that matters to you, a converter can package these PNGs afterwards, but for practically every site, PNG is the right answer and the extra file is unnecessary.
Putting them in place
Upload the icons to your site root rather than a subfolder. Browsers request /favicon.ico automatically when nothing is declared, and several tools assume root paths regardless of what your HTML says. Then paste the snippet into the head of every page.
Expect the old icon to persist. Favicons are cached aggressively, often beyond a normal hard refresh, so check in a private window or a different browser before concluding it has not worked. To prepare the source image, the image cropper squares it up and the SVG converter rasterises vector artwork at a high enough resolution. Nothing you upload here leaves your browser.