About Favicon generator
Favicons became needlessly complicated. What was one 16-pixel icon is now a set of files at different sizes for browser tabs, bookmark bars, iOS home screens and Android launchers — and every guide gives a slightly different list.
Drop in one square image and you get the full set, plus the HTML to paste into your `
`.What you get. A `favicon.ico` containing 16, 32 and 48 pixel versions, standalone PNGs at 16, 32, 48, 192 and 512, an `apple-touch-icon.png` at 180, and a snippet with the three link tags that actually matter.
Why an .ico at all, in 2026? Because browsers still request `/favicon.ico` from the site root automatically, even with no link tag present. Serving one avoids a stream of 404s in your logs, and it remains the most reliable fallback. The format is a container holding several images at different sizes, and the browser picks whichever fits — which is why one file covers 16, 32 and 48.
Why 180 for Apple. iOS uses `apple-touch-icon` when someone adds your site to their home screen. At 180×180 it covers current devices and downscales cleanly for older ones. iOS also adds its own rounded corners, so do not round yours — you will get a doubly-rounded icon with an odd outline.
Start large and square. 512×512 or bigger. Images are only ever downscaled here, never upscaled, because enlarging a small icon produces a soft result at a larger file size. A non-square source is squashed to fit rather than cropped, so nothing is silently cut off — but square input gives a better result.
Design for 16 pixels, not 512. This is the mistake almost everyone makes. Detail that looks crisp at full size turns to mud in a browser tab. Simple shapes, heavy strokes and strong contrast survive; fine lines, gradients and text almost never do. Check the 16×16 output before shipping — it is the size people will actually see.
Everything runs in your browser. Nothing is uploaded.
Questions
What files do I actually need?
favicon.ico at the site root, a 192px PNG for Android, and apple-touch-icon.png at 180 for iOS. The included snippet wires up all three.
Do I still need a .ico file?
Yes. Browsers request /favicon.ico automatically even without a link tag, so serving one avoids constant 404s and gives you a reliable fallback.
What size should my source image be?
At least 512×512 and square. Images are only downscaled — upscaling a small icon just makes it blurry.
Should I round the corners for iOS?
No. iOS applies its own rounding. Pre-rounded artwork ends up doubly rounded with an odd outline.
Is my image uploaded?
No. Every size is rendered in your browser and the ICO is assembled locally.