Skip to main content

Favicon Generator

Turn your logo into a real multi-size favicon.ico, every PNG size browsers ask for, a manifest and the HTML to paste in.

Your image is processed entirely in your browser. It is never uploaded to a server.

Create a Complete Favicon Set

Upload a logo and get every icon a modern site needs: a real favicon.ico containing the 16, 32 and 48 pixel versions, PNGs for browsers and mobile home screens, a web manifest, and the HTML to paste into your head.

Everything is rendered in your browser on a canvas. Your logo is never uploaded to a server.

Which Files You Actually Need

favicon.ico is still worth having. It is what older browsers, Windows shortcuts and some feed readers look for, and it is the file browsers request from your site root even when you have not linked to it. A genuine .ico is a container holding several sizes in one file — this tool builds that container properly rather than renaming a PNG.

The 16 and 32 pixel PNGs cover browser tabs and bookmarks. apple-touch-icon.png at 180 pixels is used when someone adds your site to an iOS home screen. The 192 and 512 pixel Android icons are referenced from the web manifest and used for the Android home screen and splash screen.

Designing an Icon That Works at 16 Pixels

A favicon is often displayed at 16 pixels square. Detail that looks fine on a business card disappears entirely at that size, so a full logo with a wordmark rarely survives.

The usual answer is a simplified mark: a single letter, a symbol, or the most distinctive shape from your logo. Strong contrast matters more than fidelity — the icon has to be recognisable next to a dozen other tabs.

The padding control adds breathing room inside the square. A little padding often helps a dense mark read more clearly, while a simple shape can usually fill the frame.

Transparent or Solid Background

A transparent icon adapts to whatever background the browser or operating system places behind it, which usually looks best in a browser tab.

A solid background is safer for the Apple touch icon, since iOS composites the icon onto a home screen where transparency can leave the artwork looking cut out. If your source image has no transparency, the background option makes no visible difference and the tool says so.

Installing the Files

Copy every file into the public root of your site so they are reachable at /favicon.ico, /favicon-32x32.png and so on, then paste the HTML snippet into the head of your pages. The ZIP includes a README repeating these steps.

Browsers cache favicons aggressively. If an old icon persists after you deploy, try a hard refresh or an incognito window before assuming something is wrong.

Frequently Asked Questions

Is this a real .ico file or a renamed PNG?+

A real ICO. The file is built as a proper icon container with a directory of three images — 16, 32 and 48 pixels — each stored as PNG data, which is the modern ICO layout. It is not a PNG with the extension changed.

Is my logo uploaded to a server?+

No. Every size is rendered in your browser on a canvas. The image never leaves your device and nothing is stored.

What size should my source image be?+

At least 512 by 512 pixels and square. Every icon is drawn from the original rather than from a smaller intermediate, so a large square source gives the cleanest result at all sizes.

Can I upload a non-square logo?+

Yes. It is centred and fitted inside the square without distortion, and the tool warns you when the source is not square. For a wide wordmark, cropping to the most distinctive part first usually looks better.

Do I need the site.webmanifest file?+

Only if you want Android home-screen support or a progressive web app. It is harmless to include, and you can edit the name and colours inside it to match your brand.

Why is my old favicon still showing?+

Favicons are cached very aggressively. Try a hard refresh, an incognito window, or a different browser before changing anything. It usually resolves on its own within a day.

Generate Your Favicons

A real .ico, every PNG size and the HTML — free, in your browser.

Open the Favicon Generator