Favicon Generator
Upload one image, get every favicon size, processed entirely in your browser.
How to Use
Upload any image, a logo, icon, or photo works. If it isn't already square, it's automatically center-cropped to a square before resizing, so nothing looks stretched. Each standard favicon size renders instantly below; download them one at a time or all together, then upload the files to your website's root folder and add the <link> tags shown above to your page's <head>. All the resizing happens locally in your browser using the HTML Canvas API, there's no upload step, no server processing, and no waiting, which also means the tool works fine offline once the page itself has loaded.
Which Sizes Do I Actually Need?
16×16 and 32×32 are the classic browser tab favicon sizes, with 48×48 sometimes used for higher-density displays and Windows site shortcuts. 180×180 is used by iOS as the "apple-touch-icon" when someone adds your site to their home screen. 192×192 and 512×512 are used by Android Chrome and as PWA app icons, with the 512×512 size specifically doubling as the source image for Android's adaptive icon system, which can crop it into different shapes depending on the device's icon theme. Including all six covers browsers, tab bars, bookmarks, and home-screen shortcuts across desktop and mobile, without needing to guess which specific size a given platform will request.
How the Center-Crop Works
When a source image isn't already square, this tool crops it to the largest possible centered square before generating any sizes, rather than squeezing it to fit and distorting the proportions. For example, a 1200×800 landscape photo gets cropped to an 800×800 square, taken from the horizontal center, trimming 200 pixels off each side while keeping the full vertical height. This center-crop approach works well for logos and icons that are already reasonably centered within their frame, but if your source image has an important detail positioned off to one side, like a logo mark sitting in the left third of a wide banner, that detail can end up partially or fully cropped out. For best results, start with a source image where the part you want as your icon is already roughly centered and close to square.
A Brief History of the Favicon
The favicon originated with Internet Explorer 5 in 1999, which introduced support for a small icon file, specifically named favicon.ico and placed at a site's root, that would display next to the page title in the browser's address bar and in bookmarks. The .ico format itself predates the web entirely, it was originally a Windows icon format used for desktop application icons, capable of bundling multiple resolutions inside a single file. As the web evolved past Internet Explorer's original implementation, browsers gradually added support for referencing favicons directly via a <link rel="icon"> tag in a page's <head>, using ordinary PNG images instead of requiring the older, more specialized .ico format, which is why PNG-based favicons, the kind this tool generates, are the modern standard today.
Favicons and the Web App Manifest
The 192×192 and 512×512 sizes generated by this tool aren't just larger favicons, they serve a specific role in a website's manifest.json file, the configuration file that lets a site be installed as a Progressive Web App on a phone or desktop. A manifest.json typically includes an "icons" array listing each available size along with its file path and MIME type, and when that array references these icon sizes correctly, the same site can present a proper app-like icon on a home screen or app drawer, rather than a blurry or oddly-cropped fallback image. If your project already has a manifest.json, make sure the icon file paths and sizes listed there match the actual files you upload, a mismatch between the declared size and the real image dimensions is a common reason PWA install icons come out looking wrong even after the correct-looking favicon files are in place.
Designing an Icon That Works at Small Sizes
A logo that looks great at full size on a website header can become an illegible smudge once shrunk down to 16×16 pixels, which is smaller than most letters in this sentence. Detailed logos with thin lines, small text, or multiple overlapping elements tend to lose all their detail at favicon scale and often just read as a fuzzy blob in a browser tab. The icons that hold up best at small sizes are simple: a single bold shape, a letter or initial rendered in a heavy weight, or a high-contrast symbol with clean edges. If your full logo doesn't simplify well, consider using just a distinctive icon element from it, or a single letter in your brand's color, as the favicon specifically, rather than forcing the entire logo to survive the shrink. It's worth generating a preview and actually looking at the 16×16 thumbnail at real size, not zoomed in, since that tiny preview is the truest test of whether an icon design will hold up in an actual browser tab.
SVG Favicons: A Modern Alternative
Beyond the PNG sizes this tool generates, modern browsers also support SVG favicons, referenced with <link rel="icon" type="image/svg+xml" href="/favicon.svg">. An SVG favicon is vector-based rather than a fixed grid of pixels, so it stays perfectly sharp at any size the browser chooses to render it at, and automatically adapts to light or dark tab bars if the SVG includes a prefers-color-scheme media query internally. The tradeoff is that SVG favicons need to be created separately, usually by hand or exported directly from a vector design tool like Illustrator or Figma, since this generator (like most favicon tools) works from a raster image and outputs raster PNG files. A common, robust setup uses both: an SVG favicon as the primary modern icon, with the PNG sizes generated here included as a fallback for browsers, platforms, and contexts (like Android home screens) that specifically require a raster image.
Testing a Favicon Across Devices
Because favicon caching and platform behavior vary so much, the most reliable way to confirm a new favicon actually works is to test it in more than one place. Open the live page in a private or incognito browser window first, this sidesteps your regular browser's favicon cache and shows you what a first-time visitor actually sees. Check the browser tab, a bookmark, and, on mobile, try adding the page to your home screen to confirm the apple-touch-icon or Android icon appears correctly rather than falling back to a generic screenshot thumbnail. If anything looks wrong, double-check that the file paths in your <link> tags exactly match where you actually uploaded the generated files, a mismatched path is a far more common cause of a broken favicon than an issue with the image itself.
Common Mistakes When Setting Up a Favicon
Forgetting to clear browser cache when testing. Browsers cache favicons aggressively, sometimes for weeks, so after replacing your favicon files, your own browser may keep showing the old one until you hard-refresh or clear the site's cached data, even though visitors with no prior cache will see the new one immediately.
Only uploading one size. A single 32×32 icon technically works in a browser tab, but without the larger sizes, home screen shortcuts and PWA installs often fall back to a generic, unbranded icon instead of your actual logo.
Placing the files in the wrong directory. Favicon files are conventionally expected at a site's root (like /favicon-32x32.png), and the <link> tags need to reference the correct relative path, a subfolder mismatch is one of the most common reasons a correctly generated favicon still doesn't show up.
Using a busy, detailed image as the source. A photo or screenshot with a lot going on rarely reads clearly once reduced to icon size, the design tips above about simple, high-contrast shapes apply just as much to choosing a good source image as to designing one from scratch.
Frequently Asked Questions
Do I need a real .ico file too?
Modern browsers fully support PNG favicons via the <link rel="icon"> tag, so a .ico file isn't required. Some very old browsers fall back to looking for /favicon.ico automatically, so if you want maximum compatibility you can additionally rename a 32×32 PNG copy to favicon.ico as a fallback.
My source image isn't square, will it look distorted?
No, non-square images are automatically cropped to a centered square first, so the output icons stay proportional instead of being squeezed.
Is my image uploaded anywhere?
No, every size is generated locally using the Canvas API. Your image never leaves your device.
Why are there so many different favicon sizes?
Different platforms request different sizes for different purposes, browser tabs use small 16x16 and 32x32 icons, iOS home screens request a larger 180x180 apple-touch-icon, and Android and PWA installs use 192x192 and 512x512. Generating all of them upfront means your site looks correct everywhere without guessing which one a given device will ask for.
My preview thumbnail looks blurry, why?
If your source image is small or low-resolution to begin with, scaling it up to larger sizes like 512x512 can look soft, since there's no extra detail to add. For the sharpest results across all sizes, start with a source image at least 512x512 pixels.
Can I use a transparent background PNG for my favicon?
Yes, transparency is fully supported and often looks better than a solid background, since the icon then blends naturally with both light and dark browser tab bars instead of showing a visible colored square.