Favicon Generator
Turn any image into a complete favicon set (.ico + PNGs + manifest). Download as zip.
Turn any image into a favicon, the small icon that appears in browser tabs, bookmarks, and history. Upload a logo or square graphic and get a multi-size .ico file plus the individual PNG sizes modern browsers and mobile devices expect, ready to drop into your site.
The conversion runs entirely in your browser. Your logo is never uploaded to a server, so unreleased branding stays private. The tool resizes and packages everything on your device, with nothing stored or transmitted.
Drop a square image (512×512+ ideal)
Generates favicon.ico + all PNG sizes + manifest
🔒 100% Browser-Based
Your image is processed entirely in your browser. Nothing is uploaded. Verify in DevTools → Network tab — zero outbound traffic with file content.
About Favicon Generator
Turn any image into a complete favicon package — favicon.ico, all the PNG sizes, an Apple touch icon, and a web manifest — plus ready-to-paste HTML. Generated entirely in your browser.
How to use the Favicon Generator
- 1
Upload a square image
Use a square source, ideally at least 512 x 512 pixels, so every size downsizes cleanly. A PNG with a transparent background works best for logos that need to sit on different tab colors.
- 2
Generate the sizes
The tool produces the standard favicon sizes at once: 16x16 and 32x32 for desktop tabs, plus 180x180 for the Apple touch icon used when someone saves your site to a home screen.
- 3
Download the files
Grab the multi-size .ico (which bundles several resolutions in one file) and the individual PNGs. Together these cover desktop browsers, mobile bookmarks, and home-screen shortcuts.
- 4
Add them to your site
Place the files in your site root and reference them in your HTML head with link tags for the icon and the apple-touch-icon, so browsers pick the right size automatically.
Which favicon sizes you actually need
16x16 is the classic tab icon and the smallest, where fine detail disappears. 32x32 serves high-DPI tabs, the Windows taskbar, and bookmark bars. 180x180 is the apple-touch-icon iOS uses when a visitor adds your site to their home screen; it should have no transparency since iOS adds its own rounded corners and background.
The .ico format is special: a single .ico file holds multiple resolutions at once (typically 16, 32, and 48), and the browser automatically picks the best one for the context. Serving a multi-size .ico at /favicon.ico is the most reliable baseline because browsers look for it by default, even without any HTML link tag.
Designing an icon that survives 16 pixels
At 16x16 you have almost no room for detail. A full wordmark or an intricate logo turns into an unreadable smudge. The fix is to design for the smallest size: use a single bold letter, a simple mark, or a cropped emblem rather than the entire logo.
High contrast is essential because the icon sits against browser chrome that may be light or dark. A transparent background lets the icon adapt, but make sure the shape still reads against both. Test the actual 16x16 output, not the 512 source, since what looks crisp large can vanish small. If your logo is wide, consider a square monogram version just for the favicon.
Quick tips
- ✓Start from a source at least 512 x 512 so the largest sizes stay sharp and the small ones downscale without artifacts.
- ✓Use a bold, simplified mark or single letter for the favicon. Full logos with thin text become illegible at 16 pixels.
- ✓Give the Apple touch icon (180x180) a solid background, not transparency, because iOS composites it onto its own tile and transparent areas can look broken.
- ✓Keep the multi-size .ico at your site root as /favicon.ico. Browsers request it automatically even if you forget the HTML link tag.
- ✓After deploying, hard-refresh or clear the cache to see the new icon, since browsers cache favicons aggressively and may show the old one for a while.
Frequently asked questions
What sizes are generated?
16, 32, and 48px (packed into favicon.ico), 180px Apple touch icon, and 192/512px for Android and PWAs.
Where do the files go?
Place them in your site's root folder and paste the provided HTML into your <head>.
What image should I use?
A square image, 512×512 or larger. Simple, high-contrast designs read best at tiny sizes.
Why does a .ico file contain multiple sizes?
The .ico format can bundle several resolutions in one file. The browser automatically selects the best size for the context, so a single /favicon.ico covers desktop tabs, the taskbar, and bookmarks reliably.
Do I still need PNGs if I have an .ico?
Yes. The separate PNGs, especially the 180x180 apple-touch-icon, cover mobile home-screen shortcuts and high-resolution displays that the legacy .ico does not address as well.
My new favicon isn't showing up. Why?
Browsers cache favicons aggressively. Hard-refresh the page, clear your cache, or open the favicon URL directly to force an update. It can take a little while to refresh everywhere.