Favicon Maker: The Tiny Icon That Defines Your Browser Tab
A favicon is the small image next to your site's name in browser tabs and bookmarks. It's tiny β usually 32Γ32 pixels β but it shapes how your site is recognized. This guide covers what sizes you need and how modern favicons differ from classic ones.
Favicons started out as a single 16Γ16 .ico file that browsers fetched from the site root. Modern web requires multiple sizes for different contexts β tabs, bookmarks, iOS home screens, Android shortcuts, Windows tiles. A favicon maker generates them all from one source image.
Favicon sizes you need
| Size | Use case |
|---|---|
| 16Γ16 | Browser tab, bookmark |
| 32Γ32 | Browser tab on retina displays |
| 48Γ48 | Windows site icons |
| 180Γ180 | Apple touch icon (home screen; transparent pixels turn black, so it is saved opaque) |
| 192Γ192 | Android home screen (listed in site.webmanifest) |
| 512Γ512 | Installed web app and splash screen (listed in site.webmanifest) |
Design tips
- β’Start with a square source image, ideally 512Γ512 or larger.
- β’Test at 16Γ16 β if it's unrecognizable that small, simplify the design.
- β’Use bold shapes, not fine detail; thin lines disappear at small sizes.
- β’Match brand colors but ensure contrast against both light and dark browser themes.
Extended FAQ
Is .ico still required?
Yes. Browsers and many services request /favicon.ico from the site root even without a link tag, so keep it alongside the PNGs. The ZIP includes both.
Do I need every size?
The ZIP holds only files something actually reads: favicon.ico, 16/32/96px PNGs, the 180px Apple icon, and the 192/512px Android icons with their manifest.
Are my files uploaded?
No. The source image is read locally and every icon size is generated in the page. Nothing is uploaded.