Favicon generator · PNG to ICO and every size
Upload one logo or picture and get favicon.ico for browser tabs (16·32·48), PNG icons for iPhone and Android home screens (180·192·512), a site.webmanifest and the HTML code to paste, all at once.
🔒 Your files are never uploadedActual-size preview — see how it looks on a light tab and a dark tab. If it is unreadable at 16px, use a simpler shape.
To remove a white background from the logo first use make a white background transparent; to keep only part of it use crop image; to match brand colour codes use the color code converter.
Why so many sizes
favicon.ico — browser tabs, bookmarks, the address bar. One file holding 16, 32 and 48 px versions so the browser picks the right one for the screen scale. The oldest format, understood everywhere.
favicon-16x16 · 32x32.png — for modern browsers that ask for PNG rather than ICO.
apple-touch-icon.png (180) — the icon iPhone and iPad show for "Add to Home Screen". iOS rounds the corners itself.
android-chrome-192 · 512.png + site.webmanifest — Android home screens and installable web apps (PWA); 512 is used on the install screen and splash.
Detail disappears as icons shrink, so a logo with words in it is unreadable at 16 px. For the tab icon, a symbol or a single initial works best.
How to install them
Unzip the files into the root folder of your site (where index.html lives) and paste the code into the <head> of every page.
If the files live in a subfolder, change the leading / in the code to that folder. Browsers cache favicons aggressively: if the new one does not show,
open /favicon.ico directly in a new tab or clear the cache. WordPress users can simply upload the 512 PNG under Appearance → Customize → Site Icon.
Why it runs in the browser — a logo you are preparing a favicon for is often not public yet. The resizing, the ICO and the ZIP are all produced on your device; the picture is never uploaded, and the page works offline.
Frequently asked questions
Is my logo uploaded?
No. Resizing, packing the ICO and PNGs and building the ZIP all happen inside your browser. It works with the internet switched off, and nothing of an unreleased logo is left anywhere.
What picture should I start from?
Something close to square and at least 512 px keeps every size sharp; an SVG stays sharp at any size. A PNG with a transparent background is ideal. If the background is white, either keep it or remove it first with make a white background transparent.
Can I get away with just the ICO?
For the tab icon alone, "Save favicon.ico only" is enough. iPhone home screens, Android and installable web apps ignore ICO and need PNG, so for phones use the full ZIP.
Why add padding?
Android masks icons into circles and other shapes, and artwork that reaches the edge gets clipped. 10–15% padding is safe for any mask. Tab icons, on the other hand, look bigger when they fill the square.
The transparent background looks black somewhere
The ICO stores 32-bit pixels with alpha, so transparency is preserved. A few old Windows programs render ICO transparency as black; browsers do not. If it worries you, set the background to white.
What is the site name in site.webmanifest for?
It is the label shown under the icon when the site is added to an Android home screen. Leave it empty and the browser uses the page title. You can edit the file later in any text editor.