Click to upload or drag & drop your image here
PNG or JPG, square image recommended (512×512 or larger)
Everything a favicon setup needs, in one download
No cropping each size by hand, no missing formats
Every size covered
16×16 up to 512×512, ICO, and manifest icons in one package.
All devices & browsers
Apple touch icon and Android Chrome icons included, not just desktop.
Ready-to-paste code
The exact HTML link tags are generated for you, no manual writing.
Free & private
No signup, and your image isn't kept after the package is generated.
The small icon that's easy to forget
A favicon is one of the smallest assets on a website, and it's usually the last thing anyone thinks about — right up until a browser tab shows a generic blank page icon next to every other tab showing a real logo. That tiny visual gap is enough to make a site look unfinished or untrustworthy at a glance, even when everything else about the site is polished. The trouble is that a proper favicon setup isn't actually just one image: modern browsers, phones, and bookmark systems each expect their own specific size and format, and getting all of them right by hand means exporting the same logo a dozen different ways from a design tool. This generator does that entire export process in one step, from a single image upload.
Why one icon isn't enough anymore
Back when favicons first appeared in browsers, a single 16×16 pixel ICO file was genuinely all that was needed. That's no longer true. A modern site's icon has to work as a tiny browser tab image, a sharp bookmark icon, a home-screen shortcut on an iPhone, an app-like icon on Android Chrome, and a crisp image in a browser's tab-switcher view on a high-resolution display — and each of those contexts expects a differently sized file rather than one image stretched or shrunk to fit.
Serving the wrong size for a given context usually doesn't cause an error; it just looks subtly wrong — a blurry, upscaled icon on a phone's home screen, or a cropped, off-center logo in a bookmark bar. Because these problems are cosmetic rather than functional, they're easy to miss during testing on a single device and only show up once real visitors view the site on the specific device or browser that wasn't covered. Generating the full set up front avoids the problem entirely rather than patching it one missing size at a time.
Favicons are also aggressively cached by browsers, sometimes for weeks, which means a half-finished favicon setup can linger visibly long after it's technically been fixed on the server. This makes it worth getting the complete set right in one pass rather than patching it size by size over several deploys, since visitors who already cached the old (or missing) icon won't necessarily see updates right away regardless of how quickly the underlying files change.
What's inside the package
Seven files covering every browser, device, and bookmark context
| File | Size | Used for |
|---|---|---|
| favicon.ico | Multi-size | Classic browser tab icon, widest compatibility |
| favicon-16x16.png | 16×16 | Small browser tab display |
| favicon-32x32.png | 32×32 | Standard browser tab and taskbar |
| apple-touch-icon.png | 180×180 | iOS home-screen shortcut icon |
| android-chrome-192x192.png | 192×192 | Android home screen and app icon |
| android-chrome-512x512.png | 512×512 | Android splash screen and high-res displays |
| site.webmanifest | — | Tells browsers which icon to use, and app name/colors |
The site.webmanifest file is easy to overlook but does real work: it's what tells a phone browser which icon and background color to use if someone adds your site to their home screen, effectively letting your website behave a little like a native app icon without you having to build one.
Who generates favicons here
A few common situations
🧑💻 Solo developers
Add a proper favicon to a side project or client site without opening a design tool.
🚀 Startups launching a site
Turn a freshly designed logo into a full icon set as one of the final launch steps.
🎨 Freelance designers
Hand clients a ready-to-use icon package alongside the final logo files.
🔄 Site rebrands
Quickly replace an old, mismatched favicon after a logo redesign.
🛒 E-commerce store owners
Add a branded browser tab icon to a Shopify, WooCommerce, or custom store.
📚 Students & hobby projects
Finish off a personal portfolio or class project site with a proper icon set.
This tool vs. exporting each size by hand
| Aspect | This tool | Manual export |
|---|---|---|
| Time needed | Under a minute | 15–30 minutes in a design tool |
| Sizes covered | All standard sizes automatically | Easy to miss one or two |
| HTML link tags | Generated for you | Written by hand, easy to get wrong |
| site.webmanifest | Included automatically | Often skipped entirely |
| Software required | None — just a browser | Photoshop, Figma, or similar |
📖 How to use this tool
Common favicon mistakes worth avoiding
The most common mistake is uploading a rectangular logo — a wordmark with a wide aspect ratio, for instance — and expecting it to look right once forced into a square icon. Depending on how the crop lands, this can cut off part of the logo or leave awkward empty space around it. If your main logo isn't already square, it's worth isolating just the icon or initial from it, or adding padding around it in an image editor, before uploading here.
A second common issue is only ever testing the favicon on desktop Chrome and assuming it works everywhere. Because the icon shows up differently across contexts — a browser tab, a phone's home screen, a bookmark bar — an icon that looks fine in one place can still look wrong in another if the source image wasn't simple enough to survive every size in the package. Generating the full set and briefly checking a few of the preview thumbnails at their actual pixel size, rather than just the largest one, catches this early.
A third mistake is forgetting to actually paste the generated HTML into the site's pages after downloading the ZIP. Uploading the icon files to the server without adding the link tags to the <head> section means most browsers will still show a generic icon, since they rely on those tags (or a sensible default filename) to know where to find it.
Frequently asked questions
What image should I upload?
Use a square image at least 512×512 pixels, ideally with a transparent background (PNG). A simple logo or icon works best since favicons are displayed very small in browser tabs.
What files do I get in the package?
You get favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, a site.webmanifest file, and ready-to-paste HTML code.
How do I add the favicon to my website?
Extract the ZIP, upload the files to your website's root or static folder, then paste the provided HTML link tags into the <head> section of your pages.
Why do I need so many different sizes?
Different browsers, operating systems, and devices request different icon sizes for tabs, bookmarks, home-screen shortcuts, and app icons, so a complete package covers every context automatically instead of leaving some blank or blurry.
Is this tool free?
Yes, completely free with no signup required.
Will my uploaded image be stored?
No. The image is processed to generate the favicon package and is not kept beyond that.
What if my logo isn't square?
A square source image gives the cleanest result across every size, since non-square images get cropped or padded to fit. Cropping the logo to a square first, ideally centered on the icon element, produces the best output.
Can I use this for a personal blog or portfolio, not just a business?
Yes — any website benefits from a proper favicon, and the process is exactly the same whether the site is a business, a portfolio, or a personal blog.
Designing an icon that still reads clearly at 16 pixels
Generating every file size is only half the job — the source image itself needs to hold up once shrunk down to browser-tab size. A full wordmark logo with fine detail or thin text often turns into an unreadable smudge at 16×16 pixels, even though it looks perfectly sharp at full size. The icons that read clearly at tiny sizes tend to be simple: a bold letterform, a single geometric symbol, or a high-contrast mark with minimal fine detail.
This is why many brands use a simplified mark for their favicon rather than their full logo — a single letter or icon pulled from the logo, rather than the whole wordmark. If your existing logo doesn't simplify well on its own, consider isolating just the icon or initial from it as the source image for this tool, rather than uploading the full lockup and hoping it survives the shrink.
Color contrast matters just as much as shape at small sizes. A pale or low-contrast icon can nearly disappear against a browser's tab bar, especially in dark mode where many browsers now render tabs with a dark background by default. Icons with a solid, saturated fill color and enough contrast against both light and dark backgrounds tend to stay legible in every context, which is worth checking before finalizing a logo that's meant to double as a favicon.