Generate

Generate a Favicon from an Image

Upload one image and get the whole favicon set a modern site needs: a true multi-resolution favicon.ico, every PNG size, the Apple touch icon, a web manifest, and the HTML to paste in.

Your files never leave this device. Everything happens inside your browser, so there is no upload, no server copy and nothing to delete afterwards. You can test that claim: load this page, turn off your internet connection, and the tool still works.

What a modern site actually needs

There is a persistent myth that a single favicon.ico is enough, and another that .ico is obsolete and PNGs alone will do. Both are wrong, which is why this generator produces a set rather than a file.

File	Size	Used by
`favicon.ico`	16, 32, 48 in one file	Browsers requesting the site root directly; older software
`favicon-16x16.png`	16 x 16	Browser tabs at standard resolution
`favicon-32x32.png`	32 x 32	Browser tabs on retina displays, bookmarks
`favicon-48x48.png`	48 x 48	Windows taskbar, some bookmark views
`apple-touch-icon.png`	180 x 180	iOS home screen shortcuts
`android-chrome-192x192.png`	192 x 192	Android home screen
`android-chrome-512x512.png`	512 x 512	Progressive web app splash screens
`site.webmanifest`	—	Tells Android and PWAs which icons to use

The .ico produced here is a genuine multi-resolution file containing the 16, 32 and 48 pixel versions together. That is what the format is for, and it is why a single request to /favicon.ico can serve every context that needs a small icon.

Installing the files

Unzip the download and copy every file into the root folder of your website — the same place your homepage lives — so they are reachable atyoursite.com/favicon.ico and so on. Putting them in a subfolder is the most common reason a favicon does not appear.
Paste the supplied HTML into the <head> of every page. The manifest is found through that link tag rather than automatically.
Hard refresh, or visit yoursite.com/favicon.ico directly, to confirm it is being served.

Browsers cache favicons far more aggressively than other assets — an old icon can persist for days through ordinary reloads. If you have replaced one and nothing seems to change, it is almost certainly cached rather than broken. Loading the icon URL directly is the quickest way to see what the server is actually returning.

Designing something that survives 16 pixels

Sixteen pixels square is roughly the size of a full stop on this page. It is a brutal constraint, and it is the reason so many favicons are unreadable smudges: they are a detailed logo scaled down until nothing remains.

The favicons that work are almost always one of:

A single letter — the first initial of the brand, set heavy.
A single simple symbol, with no fine internal detail.
A bold geometric shape in one or two flat colours.

Two practical tests. Check the contrast against both a light and a dark tab bar, since you do not control which the visitor uses — a dark icon disappears entirely in dark mode. And look at the 16 pixel preview above rather than the large one: if you cannot tell what it is, neither can anyone else, and the fix is simpler artwork rather than a better generator.

Should you use an SVG favicon?

It is worth adding, but not instead of these files. Modern browsers support <link rel="icon" href="/favicon.svg" type="image/svg+xml">, and an SVG stays crisp at any size and can adapt to dark mode with a media query inside the file itself.

But it does not cover iOS home screen icons, Android home screens, the Windows taskbar, or any tool that simply requests /favicon.ico. Declare the SVG first and keep the generated set as the fallback — browsers pick the first format they understand.

How to generate a Favicon from an Image

Drop a square image onto the box above. A simple, high contrast logo works far better than a photo.
Check the previews at each size, especially 16 x 16 where fine detail disappears.
Optionally set a background colour and theme colour for the web manifest.
Download the ZIP, unpack it into your website root, and paste the supplied HTML into your head tag.

Limits worth knowing

Every tool has boundaries. These are this one's, stated plainly so you do not waste time discovering them yourself.

Detailed logos become unreadable at 16 x 16 pixels. If your logo has fine text, use just the symbol or a single letter for the small sizes.
The generated favicon.ico contains the 16, 32 and 48 pixel versions, which is what browsers actually use. Larger sizes are supplied as separate PNGs, which is current practice.
Browsers cache favicons aggressively. After replacing one you may need a hard refresh, or to visit the icon URL directly, before you see the change.

Frequently asked questions

Do I still need a favicon.ico file?

Yes. Browsers and crawlers still request /favicon.ico from the site root even when PNG icons are declared in the HTML, and some tools only look for that file. The ICO produced here holds the 16, 32 and 48 pixel versions in one file, which is exactly what it is for.

What sizes are actually needed?

16 and 32 for browser tabs, 48 for the Windows taskbar and some bookmark views, 180 for the Apple touch icon on iOS home screens, and 192 and 512 for Android and progressive web apps via the manifest. All of these are in the ZIP.

Where do the files go on my website?

Everything goes in the root folder of your site, so they are reachable at yoursite.com/favicon.ico and so on. Then paste the supplied link tags into the head of your pages. The manifest is referenced from the HTML rather than found automatically.

Why does my favicon look like a blob?

Because 16 x 16 pixels is roughly the size of a full stop on screen. Detailed artwork simply cannot survive it. Successful favicons are almost always a single shape, letter or symbol with strong contrast against both light and dark tab backgrounds.

Can I use an SVG favicon instead?

You can, and modern browsers support it, which is why an SVG is worth adding alongside. But you still need the ICO and the PNGs for older browsers, for iOS home screens, and for Android. The ZIP covers those.