Free Favicon Generator: Convert Any Image to All Required Sizes & HTML Snippet
Upload one PNG, JPG, or SVG. We render it at every favicon size browsers, iOS, and Android need (16, 32, 48, 96, 180, 192, 512px), with download buttons for each file, a ready-to-paste HTML snippet, and a PWA-compliant webmanifest. 100% client-side — your image never leaves the page.
Drop your logo or icon here
PNG, JPG, WebP, or SVG · 512×512 or larger recommended · processed locally
All 7 Required Sizes
Generates favicon-16, 32, 48, 96, apple-touch-icon (180), and android-chrome (192 and 512) in one upload. Covers browser tabs, iOS, Android, PWA, and Windows shortcuts.
iOS & PWA Ready
Includes the iOS-specific apple-touch-icon.png (180px) plus the PWA-required 192 and 512 manifest icons. No more "looks fine on desktop but blurry on iPhone" surprises.
HTML & Manifest Snippet
Copy a complete <link> tag block AND a site.webmanifest JSON in one click. Paste straight into your <head> — no missing-tag bugs.
100% Client-Side
All resizing happens in your browser via the Canvas API. No uploads to a server, no usage tracking, no signup. Works offline once the page is loaded.
Every Favicon Size Modern Browsers, iOS & Android Actually Want
Favicons sound trivial until you ship a site and realise the iPhone home-screen icon is a blurry screenshot, the Android shortcut is generic grey, and Windows shows a tiny pixelated version of the wrong file. Modern browsers each request a different size, and getting them right requires seven distinct PNG files plus a webmanifest. Our Free Favicon Generator takes one source image (ideally 512×512 or a vector), renders it at every required size via the Canvas API, and gives you a ready-to-paste HTML <head> snippet and PWA-compliant webmanifest in seconds. No upload, no signup, no service-side processing.
Pair this generator with our Color Picker (sample your brand color for the background fill), the Image to Base64 Converter (inline a tiny SVG favicon directly in your HTML), the QR Code Generator (linkable site previews for printed material), and the Meta Tag Previewer (preview how your favicon appears in social previews and SERPs).
Favicon Formats — When To Use Each
| Format | What It Is | When To Use It |
|---|---|---|
| favicon.ico | Multi-resolution Windows ICO container (16, 32, 48 stacked) | Still required by IE and some legacy crawlers — host one at site root. |
| PNG (modern) | Per-resolution PNG files referenced via <link rel="icon"> | Preferred by all modern browsers; sharper at exact pixel sizes. |
| SVG | Single vector file that scales to any size | Supported by Chromium, Firefox, Safari TP. Provide as fallback alongside PNG. |
| apple-touch-icon | iOS-specific 180×180 PNG for Home-Screen shortcut | iOS ignores web favicons here — needs the dedicated file at root. |
| webmanifest | JSON manifest pointing to 192px and 512px icons | Required for PWA installability and Android home-screen quality. |
Anatomy of a Favicon That Reads at 16×16
1. One Strong Silhouette
At 16×16, you have ~256 pixels to communicate one idea. Use a single bold shape — a letter, a monogram, or one icon — not a busy combination mark.
2. High Contrast
The icon must read against both light and dark browser-tab backgrounds. Pure black or pure white fills fail on one side; use brand colors with sufficient contrast on both.
3. Avoid Thin Strokes
Strokes thinner than 1.5px disappear in the 16×16 rasterisation. If your logo uses thin lines, design a simplified favicon variant — most major brands do.
4. Padding for iOS
iOS adds rounded-corner masking around your apple-touch-icon. Leave ~10% padding on all sides so the corners do not clip important content. Use the padding slider in this tool.
Favicon Bugs You Will Hit (And Fixes)
1. Stale Cache Showing Old Favicon
Browsers cache favicons aggressively — sometimes for weeks. After deploying, append a query string (favicon-32x32.png?v=2) in the <link> tag to force a refresh. Update the version every time you change the icon.
2. Wrong-Path apple-touch-icon
iOS only checks /apple-touch-icon.png at the site root unless you specify <link rel="apple-touch-icon">. Don't put it in /images/ and expect iOS to find it — either include the link tag or copy it to root.
3. Missing CORS Headers
If you serve favicons from a CDN with strict CORS, some browsers refuse to load them. Either serve them from the same origin as the HTML, or add Access-Control-Allow-Origin: * for image files.
4. Manifest Without 192 OR 512
Chrome refuses PWA installs if your site.webmanifest is missing either 192 or 512. Both are mandatory. Our generator outputs both so the bundled manifest snippet just works.