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.
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.
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.