How to use
- Choose what to build the icon from: upload a logo, or type a letter or emoji (such as T, Ab or 🔥) to place on a colored background.
- Adjust the shape (square, rounded or circle), colors and padding. Previews from 16 px to 512 px update instantly, including a mock browser tab.
- Enter your site name and theme color, then click Download all (ZIP). Copy the
<head>code below into your site and you are done.
Images are processed in your browser and never uploaded.
What you get
| File | Size | Used for |
|---|---|---|
favicon.ico |
16, 32 and 48 px in one file | Browser tabs and bookmarks. Browsers look for it at the site root even without a link tag |
favicon-16x16.png, favicon-32x32.png |
16, 32 px | Browser tabs that support PNG icons |
apple-touch-icon.png |
180 px | “Add to Home Screen” on iPhone and iPad |
android-chrome-192x192.png, -512x512.png |
192, 512 px | Android home screen, installable web app (PWA) icon and splash screen |
site.webmanifest |
— | Web app manifest with the app name, icons and colors |
favicon.ico is a container holding several sizes, and the browser picks the one that fits the screen density. This tool writes the ICO header itself and stores each size as a PNG — the variant supported since Windows Vista and by every major browser.
Installing the icons
- Unzip the files into your site’s root folder (the place where
https://example.com/favicon.icowould load). If you use another folder, enter it under Icon path. - Paste the generated code inside the
<head>of every page. - Browsers cache favicons aggressively. If the old icon still shows, do a hard refresh or check in a private window.
Making an icon that reads well
- It has to work at 16 px. Wordmarks turn to mush; a symbol or a single letter works better. Always check the 16×16 preview.
- A transparent background can disappear on dark tabs — use the dark tab preview to check contrast.
- iOS applies its own rounded corners to home-screen icons and may show transparent areas as black, so the apple-touch-icon is a solid square by default.
- Google recommends favicons that are a multiple of 48 px for search results. The 48 px image inside the ICO and the 192 px PNG both qualify.
FAQ
Can I use an SVG logo?
Yes — upload the SVG and it is rendered at each size. To convert an SVG to PNG directly, use SVG to PNG.
Can I inline the icon in HTML instead?
A small PNG can be turned into a data URI with Image to Base64 and used as <link rel="icon" href="data:…">. It is downloaded again with every page, though, so separate files are the usual choice.
What does theme-color do?
Some mobile browsers, such as Chrome on Android, tint the address bar or toolbar with it. The manifest’s background_color is the splash-screen color shown briefly when an installed web app opens.