A favicon generator for every browser and device
A favicon is the small icon in browser tabs, bookmarks, search results and home screens. Different platforms want different sizes and formats, which makes creating them by hand tedious. This favicon generator produces a complete, modern set from one source — an uploaded logo or simply a letter or emoji — and writes the HTML and web manifest for you.
Files in the package
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browsers, Windows, legacy tools that request /favicon.ico |
| favicon-16x16.png, favicon-32x32.png | 16 and 32 px | Browser tabs and bookmarks |
| apple-touch-icon.png | 180 px, opaque | iPhone and iPad home screen |
| android-chrome-192x192.png / 512x512.png | 192 and 512 px | Android home screen, PWA install, splash screens |
| site.webmanifest | JSON | Android and installable web apps |
The ICO file stores PNG-compressed images, a format supported by Windows Vista and later and by all current browsers. Apple touch icons are made opaque because iOS fills transparent areas with black.
The HTML you paste
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f766e">Change Icon path if the files live in a sub-folder such as /icons/; all references update automatically.
Text and emoji favicons
Many good favicons are just an initial on a coloured background. Type one to three characters or an emoji, pick colours, a font style and a square, rounded or circular shape. The text is scaled to fill the icon while staying inside safe margins. Emoji are drawn with your system's emoji font, so they look slightly different on Windows, macOS and Android.
Using your logo
Upload a square PNG or SVG with a transparent background. Contain fits the whole logo, Cover fills the square and crops overflow, and Padding adds breathing room. Detailed logos rarely read well at 16 pixels — check the 16 px preview and consider a simplified mark or a single letter for the smallest sizes. The browser-tab mock-up under the previews shows how it looks next to your site name.
After uploading, check the icons and your other head tags with the meta tag generator. To convert the SVG logo itself to PNG at other sizes, use SVG to PNG.
Checklist after uploading
- Open
https://yourdomain.com/favicon.icodirectly to confirm it is served. - Add the site to an iPhone or Android home screen to see the touch icons.
- Validate the manifest in your browser's developer tools (Application panel).
Design tips for tiny icons
At 16 × 16 pixels there is room for about one bold shape. Use high contrast between foreground and background, avoid thin lines and small text, and make sure the icon still reads on both light and dark browser tabs. A solid rounded square with a single white letter is a reliable choice. Keep the icon consistent with your logo colours so people recognise your tab among many.
Privacy
Everything happens locally in your browser with JavaScript and the Canvas API. Your images are never uploaded to our servers, so the tool also works with confidential screenshots and personal photos.