Favicon Generator
Upload any image and generate a complete set of favicons, .ico, PNG sizes, and Apple Touch Icon, ready to add to your website.
Drop an image here or click to browse
JPG, PNG, WebP, or SVG. Square images work best
Maximum file size: 50MB
A favicon is the small icon that appears in browser tabs, bookmarks, browser history, and home screen shortcuts. While a 16×16 favicon seems trivial, it appears in hundreds of contexts across every visitor's browsing session, and missing or generic favicons make a site look unfinished. Modern websites need multiple favicon sizes: 16×16 and 32×32 for browser tabs, 180×180 for Apple Touch Icons (iPhone home screen shortcuts), 192×192 and 512×512 for Android PWA manifests, and a multi-resolution .ico file for the root domain. This tool generates all required sizes from a single source image entirely on your device.
How to use
- Open your source image. Start with a square image (equal width and height) at least 512×512 pixels. Your company logo, app icon, or a simple symbol or letter works best. The source image is scaled down to each favicon size, so start with the largest, highest-quality version available.
- Preview all sizes. The tool renders previews of each size (16×16, 32×32, 48×48, 180×180, 192×192, 512×512) so you can see how your image looks at small sizes before downloading. Small details visible at 512×512 often become invisible or cluttered at 16×16.
- Download the favicon package. Click Download All to get a ZIP file containing all generated favicon files plus the recommended HTML
<link>tags to add to your website's<head>section. - Add to your website. Place the favicon files in your site's root directory (or the path specified in the link tags) and add the provided HTML snippet to your
<head>section. Test in multiple browsers to confirm the favicon appears correctly.
Tips for best results
- Start with an SVG or high-resolution image. The favicon generator scales your source down to tiny sizes. Start with an SVG (which is resolution-independent) or at least a 512×512 PNG for sharp results at all output sizes. For SVGs, use the SVG to PNG converter to rasterize at 512×512 first if needed.
- Keep it simple at small sizes. Complex logos with fine details, thin lines, or small text look muddy at 16×16 pixels. Consider creating a simplified version of your logo, just the icon mark or a single letter, for use as a favicon rather than the full wordmark.
- Test in dark mode. Browsers display favicons in both light and dark tab bars depending on the system theme. A dark icon on a dark tab bar becomes invisible. Test your favicon against both light and dark backgrounds, and consider a version with a contrasting background if needed.
- Update your manifest.json for PWA. If your site is a Progressive Web App, the 192×192 and 512×512 PNG files need to be referenced in your
manifest.jsonalongside the icon sizes and purposes specified in the Web App Manifest spec.
Why use PixMidas
- All sizes in one download. Get every required favicon size, .ico, 16×16, 32×32, 48×48, 180×180, 192×192, and 512×512, in a single ZIP download rather than manually resizing one at a time.
- 100% private. All favicon generation runs on your device using the Canvas API. Your logo or icon file is never uploaded to any server.
- No account needed. Free and instant. Favicon generation runs locally on your device.
Frequently asked questions
What favicon sizes do I actually need?
The minimum set for full compatibility is: favicon.ico (contains 16×16 and 32×32 layers) for the root domain, apple-touch-icon.png at 180×180 for iPhone/iPad home screen shortcuts, and 192×192 and 512×512 PNG files for Android PWA manifest. Including 48×48 improves display in Windows taskbar and browser extensions. The 512×512 PNG is also used as a splash screen icon in some PWA contexts.
What is the .ico format?
.ICO is a Windows icon format that can contain multiple image sizes within a single file, unlike PNG which stores one resolution. The root domain favicon.ico is fetched automatically by browsers and many services (RSS readers, password managers, link unfurlers) even before you add any link tags, so including it is important for fallback coverage. This generator creates an .ico file that contains both 16×16 and 32×32 layers.
Why does my favicon look blurry at small sizes?
Downscaling a complex image to 16×16 pixels uses 256 pixels to represent something originally rendered at 262,144 pixels (512×512). Fine details, thin lines, gradients, and text all become unrecognizable at this scale. The solution is to design or use a simplified version of your icon, a single letter, a simple symbol, or a solid-background icon mark, that reads clearly at tiny sizes. Think of how Apple, Google, and Twitter all use simplified icon marks as their favicons rather than their full logos.
Do I need to put favicon files in the root directory?
Browsers look for favicon.ico at the root of the domain by default, so https://yourdomain.com/favicon.ico is fetched automatically without any link tags. For all other favicon formats and sizes, the location is specified in the <link> tags in your HTML head. You can store them anywhere your web server can serve them. The HTML snippet included with the download specifies the correct paths.
What is an Apple Touch Icon?
The Apple Touch Icon (180×180 px) is used by iOS and iPadOS when a user adds your website to their iPhone or iPad home screen. It becomes the app icon for the web shortcut. Without it, iOS uses a screenshot of the page instead, which looks poor as a home screen icon. Android uses the 192×192 PWA manifest icon for the same purpose.
Should my favicon have a transparent or solid background?
It depends on the design. Transparent backgrounds work well for icon marks that need to adapt to different browser tab colors in both light and dark mode. Solid colored backgrounds ensure the icon looks intentional and identical regardless of the tab color. For brand logos, a solid background matching your primary brand color is typically the cleanest approach and looks the most like a native app icon on home screens.