Favicon Generator — Create All Sizes Free
Upload any image and instantly generate favicons in all 8 standard sizes — from 16×16 to 512×512 px — with individual PNG downloads and a ready-to-paste HTML snippet. No signup, runs entirely in your browser.
⏱ 8 min read · Complete guide below
Drop your image here
PNG, JPG, SVG, WebP — square images work best
Browse fileHow the Favicon Generator Works
- 1Drop or click to upload your image. A square PNG or SVG with a transparent background gives the cleanest results across all sizes.
- 2Click Generate Favicons. The tool renders your image to eight canvases simultaneously using the browser's Canvas API.
- 3Download individual PNG files or click Download All to save every size at once.
- 4Copy the HTML snippet and paste it into your site's
<head>, updating the file paths to match your project structure.
What Each Favicon Size Is Used For
Different platforms request different favicon sizes, and serving the wrong size causes browsers to scale up a small icon (producing a blurry result) or scale down a large one (wasting bandwidth). The eight sizes generated here cover every major platform:
16×16 and 32×32 are the classic browser tab sizes — 16 px for standard-density displays, 32 px for HiDPI (Retina) screens and Windows browser tabs. 48×48 and 64×64 are used by Windows for taskbar pinned sites and the site-icon tiles in the Start Menu. 128×128 is required for the Chrome Web Store. 180×180 is the Apple Touch Icon dimension — iOS uses this when a user adds your site to their home screen. 192×192 and 512×512 are the standard PWA manifest icon sizes required by Chrome, Android, and the Lighthouse audit.
Tips for Better Favicons
Start with a square source image
Favicons must be square. Upload a 1:1 ratio image — a logo mark, icon, or initials — not a wide banner. Non-square images will be stretched to fill each canvas.
Use a transparent PNG or SVG
A PNG with a transparent background lets the browser tab or home screen background show through. A white-background logo becomes a white square in dark browser themes.
Keep it simple at 16×16
Detailed logos become illegible at 16 px. Use a single letter, a simple shape, or the first letter of your brand name — anything recognizable at thumbnail scale.
Place files in /public for web projects
In Next.js, Vite, and most frameworks, static assets go in /public. Name the file favicon.ico or favicon.png at the root — browsers check this path automatically before any HTML tag.
Test in a real browser tab
After deploying, open your site in Chrome, Firefox, and Safari to verify the favicon renders correctly. Hard-refresh the page if an old favicon persists from cache.
Include the 512×512 for PWA installs
Chrome and Android require a 512×512 icon in the Web App Manifest for the “Add to Home Screen” prompt. Without it, the Lighthouse PWA audit will flag a missing icon.
A Brief History of the Favicon
The favicon — that tiny icon in your browser tab — has a longer history than most people realise. It was introduced by Microsoft in Internet Explorer 5 back in 1999. The idea was simple: a website could place a file named favicon.ico at its root, and the browser would automatically display it next to a bookmark (a “favourite,” hence favicon) and later in the address bar and tabs. It was an instant hit because it gave sites a small but powerful piece of visual identity.
For years the .ico format — a Windows icon container that can hold several sizes in one file — was the standard. But as browsers, operating systems, and devices multiplied, so did the ways an icon could be requested, and the humble favicon grew into the sprawling set of sizes and formats we deal with today. Modern browsers happily accept PNG and even SVG favicons, which are simpler to produce than ICO files, but the legacy and the fragmentation remain — which is exactly why a generator that outputs every size at once is so handy.
Why There Are So Many Sizes and Formats
The reason a single favicon has ballooned into eight or more files is platform fragmentation. Each context wants an icon at a specific resolution so it looks crisp without scaling: a 16×16 for a standard browser tab, 32×32 for high-density (Retina) displays, larger sizes for Windows taskbar tiles and the Chrome Web Store, a 180×180 “Apple Touch Icon” for when someone adds your site to an iPhone home screen, and 192×192 plus 512×512 for Progressive Web App installs and splash screens.
Serving the wrong size forces the browser to scale — blowing up a tiny icon into a blurry mess, or shrinking a huge one and wasting bandwidth — so providing the right size for each context keeps your icon sharp everywhere. On formats: PNG is the practical modern default (universally supported, easy to generate at each size), ICO is now mostly a legacy concern for very old browsers, and a single scalable SVG favicon is an elegant emerging option supported by current browsers, though the fixed-size PNGs are still needed for home-screen and PWA icons. Generating the full set covers you across the whole landscape.
Designing a Favicon That Works at 16 Pixels
The single biggest mistake in favicon design is trying to cram a full logo into a 16-pixel square. At that size — smaller than a single character of text — fine detail simply vanishes into mush. The guiding principle is radical simplicity: a favicon should be recognisable at a glance in a crowded row of tabs, which means one bold shape, a single letter or monogram, or the most distinctive element of your logo rather than the whole thing.
A few design rules follow from this. Use strong contrast so the icon stands out against the browser's tab bar, and prefer a transparent background so it sits cleanly on both light and dark browser themes — a white-background logo becomes an awkward white box in dark mode. Avoid thin lines and small text, which disappear at tab size. A useful test is to design or preview your favicon at its actual 16×16 size rather than judging it at a comfortable large scale; if it reads clearly there, it will read everywhere. Starting from a clean, square source image gives the generator the best material to produce sharp icons at every size.
Favicons, PWAs, and the Web App Manifest
The favicon's role has expanded well beyond the browser tab into the world of Progressive Web Apps (PWAs) — websites that can be installed to a device and behave like native apps. When a user adds a PWA to their home screen, the operating system needs a proper app icon, and this is defined in a web app manifest file that points to icons at 192×192 and 512×512 pixels. The larger 512 size is also used for the splash screen shown while the app loads.
This is why the modern favicon set includes those bigger dimensions and an Apple Touch Icon: getting them right is what lets your site install cleanly with a sharp icon on Android, iOS, and desktop, and it is checked by tools like Lighthouse in their PWA audits. Once you have generated the full set of PNGs here, place them in your project (typically a /public or static folder), reference them with the standard link tags — the snippet this tool provides — or your framework's metadata API, and add the two large icons to your manifest. That covers browser tabs, bookmarks, Windows tiles, iOS home screens, and installable PWAs from a single source image, which is the whole point of generating every size in one go.
Frequently Asked Questions
Is my image uploaded to a server?
No. All processing uses the Canvas API inside your browser. Your image never leaves your device — no server, no cloud storage, no data transfer. The tool also works offline once the page has loaded.
What image formats can I use as the source?
Any format the browser can decode: JPEG, PNG, WebP, GIF, AVIF, BMP, and SVG. For best results use a square PNG or SVG with a transparent background — the tool does not crop the image, so a non-square source will produce stretched favicons.
Why does a non-square image produce distorted favicons?
Favicons must be square. The Canvas API draws the source image to fill each square canvas exactly, which stretches a rectangular image to fit. Crop your image to a 1:1 ratio first using the Image Cropper, then run it through the favicon generator.
Which sizes are generated and why?
The tool generates 16×16, 32×32, 48×48, 64×64, 128×128, 180×180, 192×192, and 512×512 pixels. These cover: browser tab icons (16, 32), Windows taskbar and site-icon tiles (48, 64), Chrome Web Store (128), Apple Touch Icon for iOS home screen (180), Android/PWA icon (192), and PWA splash screen (512).
Do I need all eight sizes?
Not necessarily. The minimum for a functional favicon is 32×32 (covers most modern browsers and Windows). Add 180×180 if you want iOS home-screen support, and 192×192 plus 512×512 for a Progressive Web App manifest. The 16×16 size is useful for older browsers and the browser history list.
Can I generate a .ico file?
The tool exports PNG files, which are accepted by all modern browsers. The ICO format is a legacy container primarily needed for IE 11 and older Internet Explorer. If you specifically need a .ico file, the 32×32 PNG can be renamed to favicon.ico and most browsers will accept it — though it is technically not a valid ICO binary.
What does the HTML snippet do?
The snippet contains the standard link tags for each common favicon size. Paste it inside the <head> of your HTML or layout file. Update the href paths to match where you placed the PNG files in your project. For Next.js projects, the recommended approach is to place favicons in the /public folder and use the Next.js metadata API instead of manual link tags.
What is the recommended favicon workflow for a Next.js app?
Place favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, and android-chrome-512x512.png in the /public/app directory, then export a metadata object from app/layout.tsx with an icons field pointing to each file. Next.js automatically generates the correct link tags in the rendered HTML.