Favicon Generator
Turn one image into the full favicon set — favicon.ico, Apple touch icon, PWA icons, and the HTML to wire them up.
No data sent to serverRelated Tools
Why One Favicon Is No Longer Enough
For most of the web’s history a single favicon.ico at the site root was the whole job. Then phones arrived. Adding a site to an iPhone home screen needs a 180-pixel Apple touch icon. Installing a progressive web app on Android needs 192 and 512 pixel PNGs declared in a manifest. Windows tiles, Safari pinned tabs, and various share sheets each had their own preferences at some point.
The good news is that the list has shrunk again. Four files cover essentially every case that still matters in 2026, and that is exactly what this generator produces.
What Each File Is For
- favicon.ico — contains 16, 32, and 48 pixel versions. Browsers request this path automatically even with no markup, and Windows uses it for shortcuts and pinned sites.
- apple-touch-icon.png (180×180) — used when someone adds your site to an iOS home screen. iOS applies its own rounded corners, so supply a square image with the artwork inside safe margins.
- icon-192.png — the Android home screen and app switcher icon for installable web apps.
- icon-512.png — the splash screen image when a PWA launches, and the source Android downsizes from for large icon slots.
Installing Them
- Save all four files to the root of your site — the same level as
index.html, or/publicin most frameworks. - Paste the HTML snippet into your
<head>. - Save the manifest as
site.webmanifestat the root and edit the name and colours. - Load your site in a private window to check — favicon caching is notoriously stubborn in normal windows.
If you use Next.js, dropping icon.png and apple-icon.png into the app directory does the wiring automatically and you can skip the link tags.
Getting a Good Result
- Start square and large. A 512×512 or bigger source gives every output size clean detail. Non-square images are scaled to fit and centred, never cropped.
- Simplify for small sizes. Fine strokes and small text vanish at 16 pixels. A single bold shape reads far better.
- Check both themes. Tab bars are light in some browsers and dark in others. A dark logo on a transparent background disappears against a dark tab.
- Leave breathing room on the Apple icon. iOS crops to a rounded square, so artwork that runs to the edge gets clipped at the corners.
Testing the Result Before You Ship It
Favicons are the easiest asset to get subtly wrong, because you look at them at 200 pixels in your design tool and ship them at 16.
Check the icon at actual size against both a light and a dark browser theme — a dark logo on transparency disappears entirely in a dark tab bar, which is invisible to you if your own browser is light. Check the Apple touch icon with rounded corners in mind, since iOS crops to a rounded square and artwork running to the edge loses its corners. And check in a private window, because favicon caching regularly survives a hard refresh and will happily show you the old icon while you conclude the new one is broken.
FAQ
Do I still need favicon.ico in 2026?
Yes, and it is cheap insurance. Browsers request /favicon.ico at the root whether or not you declare it, and Windows shortcuts still use ICO. Skipping it produces a stream of 404s in your logs.
My favicon won’t update.
Favicons are cached far more aggressively than normal assets, sometimes surviving a hard refresh. Check in a private window, or open the icon URL directly to confirm the new file is served.
Why no 32-pixel PNG?
It is already inside the ICO. Adding a separate PNG for the same size just gives browsers two competing declarations for no benefit.
Can I use an SVG favicon instead?
Modern browsers support SVG favicons and they scale perfectly, including automatic dark-mode variants with a media query. Keep the ICO as the fallback, since older browsers and Windows shortcuts still need it.
Is my logo uploaded anywhere?
No. Everything is drawn and encoded in your browser, so unreleased branding stays on your machine.
Why does my icon vanish in dark mode?
A dark logo on a transparent background has nothing to contrast against in a dark tab bar. Add a light outline, use a solid background shape, or supply a lighter variant.
Do I need a 512-pixel icon if I am not building a PWA?
Not strictly, but it costs nothing to include and is what Android uses if someone adds your site to their home screen, which happens whether or not you planned for it.
Where exactly do the files go?
At the root of the site, alongside index.html, or in the public folder in most frameworks. Browsers request /favicon.ico from the root regardless of what your markup says.
Do I need to keep the original image?
Yes. If you later need a different size or want to adjust the design, regenerating from the source beats re-processing an already-downscaled icon.
⚠️ Reference Only
Output is generated based on your input and is provided for reference. Results may vary depending on your specific use case, edge cases, or environment-specific behavior. We do not guarantee accuracy of conversions, validations, or computed values.
Always verify critical outputs against official documentation or production environments. We are not responsible for any decisions or losses based on these tool results.