Favicon Generator
Upload a logo and get every icon a site actually needs, including a real multi-resolution favicon.ico built in your browser. The 16-pixel preview shows you the one that always breaks.
Related tools
How to generate a favicon set
- Drop in your logo. Square and at least 512×512 gives the best result. Nothing is uploaded.
- Choose a background. Transparent for most sites; a solid colour if your mark needs one behind it.
- Add a little padding if your logo runs right to its edges.
- Generate, then check the 16-pixel preview — that is the one that decides whether this works.
- Download the ZIP, put every file at your site root, and paste the markup into your
<head>.
What you get
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 in one file | Legacy requests to /favicon.ico |
favicon-16x16.png | 16×16 | Browser tabs |
favicon-32x32.png | 32×32 | Tabs on high-DPI screens |
favicon-48x48.png | 48×48 | Windows, bookmarks |
apple-touch-icon.png | 180×180 | iOS home screen |
android-chrome-192x192.png | 192×192 | Android home screen |
android-chrome-512x512.png | 512×512 | PWA splash screens |
site.webmanifest | — | Install metadata |
Plus the <link> markup to paste, and a README repeating the instructions for whoever picks the folder up later.
The 16-pixel problem
This is the part of favicon design that tooling cannot solve, and the reason this tool shows you the result at actual size rather than scaled up.
A 16×16 icon is 256 pixels in total. Not 256 across — 256 altogether. For comparison, the full stop at the end of this sentence is a few pixels wide.
At that size:
- Fine lines disappear. A one-pixel stroke in a 512px logo is a fifth of a pixel at 16px. It renders as a barely-there grey smear or vanishes.
- Text is unreadable. Any wordmark longer than a single letter turns into a smudge. There are no exceptions to this.
- Detail becomes noise. Gradients band, small shapes merge, and a complex mark reads as a coloured blob.
- Thin outlines vanish against the tab. A logo that relies on a light outline disappears entirely on a light tab bar.
The successful favicons you can picture — a single letter, a simple geometric mark, one recognisable silhouette — are simple because they had to be.
What to do about it: design a separate simplified mark for small sizes. Take the initial, or the one distinctive shape from your logo, and drop everything else. Thicken strokes. Increase contrast. Then check it here at actual size, on both a light and a dark tab, because a mark that reads beautifully on white can vanish on a dark tab bar.
If you cannot tell what your icon is in the 16px preview on this page, your visitors will not either.
Why a real .ico, and how it is built
The .ico format is a container. Unlike a PNG or a JPEG, one file holds several images at different sizes, and whatever is displaying the icon picks the one closest to what it needs. That is why a single favicon.ico can serve a 16-pixel tab and a 48-pixel bookmark well, instead of scaling one size badly to both.
There is no browser API for writing one, so this tool builds the container by hand. The structure has been stable since the 1990s: a six-byte header saying how many images follow, then a sixteen-byte directory entry for each one recording its size and where its data sits in the file, then the image data itself.
Since Windows Vista an entry's payload may be a complete PNG rather than a raw bitmap, which is what this writes — the browser has already encoded PNGs for the set, and re-encoding them as bitmaps would only make the file bigger.
Two details in that format are easy to get wrong, and both are covered by tests in this project: the size field is a single byte, so 256 has to be stored as 0 by convention, and the offsets are absolute from the start of the file, so they shift depending on how many entries precede the data.
The result is a genuine multi-resolution favicon.ico of the kind a desktop icon editor would produce — not a PNG with the extension changed, which is what several online generators hand you and which some older software refuses.
Where the files go, and the markup
Everything goes at the root of your site. Not in /assets, not in /images — the root:
/favicon.ico
/favicon-16x16.png
/favicon-32x32.png
/apple-touch-icon.png
/android-chrome-192x192.png
/android-chrome-512x512.png
/site.webmanifest
favicon.ico is the one that genuinely has no choice about this. Software that requests it does so directly, without reading your HTML, so it will not find the file anywhere else.
Then in your <head>, on every page:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Finally, open site.webmanifest and fill in name and short_name, and set the colours to match your design. The generated file leaves them blank rather than guessing.
Why the icon does not update
Favicons are cached unusually aggressively — often more so than the pages that reference them, and sometimes beyond a normal hard refresh. After replacing one, a stale icon is the expected first result, not a sign that something failed.
Things that help, roughly in order:
- Hard refresh the page (Ctrl+Shift+R, or Cmd+Shift+R).
- Open the icon URL directly — visit
/favicon.icoand reload that. - Add a query string to the
<link>href:/favicon.ico?v=2. This is the reliable one. - Clear the browsing data for your site.
- Wait. Some caches, especially on mobile, simply expire on their own schedule.
Check in a private window before concluding anything is broken.
Limits and requirements
Square output, always. A non-square source is centred inside a square with space around it rather than cropped, so nothing is silently cut off.
No detail is invented. A small source upscaled to 512×512 will look soft.
PNG payloads inside the .ico. Modern and correct, and what current software expects.
The Apple touch icon is always opaque. iOS renders transparency as black on the home screen.
Browser support. Any modern browser on desktop or mobile.
Privacy: how this tool handles your logo
Every icon, the .ico container, the manifest and the ZIP are all produced inside your browser. Nothing is transmitted, nothing is logged, nothing is stored, and closing the tab discards everything.
That matters more for this tool than it might seem. Think about when someone generates a favicon set: during a rebrand, or in the days before a product launch, from a logo that has not been made public yet and often cannot be. It is routinely covered by an NDA or an embargo.
Uploading it to a third-party generator is a disclosure — small, probably harmless, and entirely unnecessary. The file sits on someone else's server, subject to a retention policy nobody read, and quite possibly in a backup for years.
Resizing an image and writing a small binary container are things a browser can do unaided. You can confirm this one does: open developer tools, watch the Network tab while you generate, and see that nothing carries your image. Or disconnect from the internet after the page has loaded — the tool keeps working, because it never needed a connection.
Frequently asked questions
Do I still need favicon.ico, or are PNGs enough?
You still want it. Browsers have accepted PNG favicons for years, so PNGs alone will work in a browser tab. But a surprising amount of other software still requests /favicon.ico directly and nothing else — RSS readers, link preview generators, some crawlers, older Windows tooling, and anything written before the link rel=icon habit took hold. The file is a couple of kilobytes and lives at your site root. There is no good reason to omit it.
What size should my source image be?
512×512 or larger, and square. The largest icon in the set is 512×512, so anything smaller has to be upscaled and will look soft on an Android home screen or a PWA splash. Square matters because every icon is square: a non-square source is centred with space around it rather than cropped, which is the safer default but may not be what you want. Crop it square first if it matters.
Why does my icon look like mud at 16 pixels?
Because 16×16 is 256 pixels in total, and most logos contain far more detail than that can hold. Fine lines vanish, text becomes a smudge, and gradients turn into noise. The fix is not technical — it is design. Successful favicons are usually a single letter, a simple mark, or a heavily simplified version of the full logo. Look at the 16px preview on this page against both a light and a dark tab: if you cannot tell what it is, no amount of tooling will save it.
Why does the Apple touch icon have a background when I chose transparent?
Because iOS composites home screen icons with no alpha channel. A transparent PNG does not become transparent on the home screen — it becomes black, which almost never looks intentional. The tool always fills that one size, using your chosen colour or white, while leaving the rest of the set transparent if that is what you asked for. It is a deliberate exception rather than the setting being ignored.
Where do the files go?
All of them at the root of your site, so they resolve as /favicon.ico, /favicon-32x32.png and so on. favicon.ico in particular must be at the root — the software that requests it directly does not read your HTML first, so it will not find the file anywhere else. Then paste the markup from this page into the head of every page.
Should I add padding?
Often, a little. A logo drawn right to the edge of its canvas touches the edge of the tab icon and looks cramped next to other favicons that do not. Around 5 to 10 percent usually looks right. Do not overdo it: padding shrinks the mark itself, and at 16 pixels every pixel matters. Apple's own guidance goes the other way for home screen icons — those are meant to fill their square, since iOS applies the rounded corners itself.
What is the site.webmanifest file for?
It tells Android and desktop browsers how to treat your site when someone adds it to their home screen or installs it as a progressive web app — which icons to use, what name to show, and what colours to paint around it. The generated file lists the two Android icon sizes and leaves the name fields blank for you to fill in. If you do not care about installability you can leave it out, though including it costs nothing.
Is my logo uploaded anywhere?
No. Every icon, including the .ico container, is generated inside your browser. Nothing is transmitted, logged or stored. This is worth caring about here specifically: favicons get generated during a rebrand or before a launch, from a logo that is not public yet. Uploading it to a third party is an unnecessary disclosure of something under embargo.