Favicon Generator — Free Image to Every Browser, iOS & PWA Size
Upload one PNG, JPG, WebP, or SVG and download every favicon size browsers, iOS, and Android need (16, 32, 48, 96, 180, 192, 512px), plus a ready-to-paste HTML <head> snippet and a PWA-compliant site.webmanifest. Runs 100% in your browser — 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.
Favicon Generator: One Image to Every Browser, iOS & PWA Size
A favicon generator turns one source image into the small icons browsers show in tabs, bookmarks, and home-screen shortcuts. Upload a PNG, JPG, WebP, or SVG and this tool renders seven sizes — 16, 32, 48, 96, 180 (Apple Touch), 192, and 512px — then hands you a copy-paste HTML <head> snippet and a site.webmanifest. It runs 100% in your browser via the Canvas API: free, no upload.
How to generate a favicon
- Drop or choose a source image — 512×512 or larger (or a vector SVG) gives the sharpest results across all sizes.
- Pick a Background: transparent for icons that float on the tab, or white, black, or a custom brand hex for a solid plate.
- Drag the Inner Padding slider (0–25%) to breathe space around the artwork — iOS masks corners, so ~10% keeps content clear.
- Review the live previews grouped by Web, iOS, and Android / PWA; the 16 and 32px tiles render pixel-exact so you can judge legibility.
- Click Download All for every PNG, then Copy the HTML snippet and the
site.webmanifestinto your project.
How browsers actually choose a favicon
A favicon is declared with <link rel="icon"> tags in the document <head>. When you supply several, the browser does not load them all — it picks one using the type, media, and sizes attributes, then falls back to the next if that format is unsupported. Per the WHATWG HTML Standard, the tie-breaker is document order:
"If there are multiple equally appropriate icons, user agents must use the last one declared in tree order."— WHATWG HTML Standard, Link type "icon"
Two practical rules follow. First, an accurate sizes attribute matters: Chromium can skip an SVG and grab a .ico if the sizes hints are wrong or missing, because it judges some icons "too large" for a 16–32px tab. Second, order your tags low-to-high so the SVG and largest PNG sit last and win the tie. The HTML snippet from this tool follows that convention. The current minimal stack is an SVG plus a 32×32 PNG fallback, a 180×180 apple-touch-icon, the 192/512 PWA icons, and a site.webmanifest — the seven raster files here cover everything except the optional vector, which you add by hand if your source is vector-clean.
Worked examples: source → output
512×512 PNG logo · transparent · 0% padding
Produces all seven files with crisp downscaling. The transparent alpha is preserved, so the icon floats on light and dark tabs alike.
Vector SVG monogram · white background · 12% padding
The SVG is rasterised at each size with a solid white plate, and 12% inset stops the iOS rounded-corner mask from clipping the mark on the 180px apple-touch-icon.
Non-square 800×400 banner · transparent
The renderer uses a contain fit (Math.min of width/height ratios) and centres the image, so a wide banner is letterboxed inside the square — never stretched or cropped.
Edge case · source smaller than 192px
Upload a 128×128 image and the tool flags "smaller than 192px — large sizes will be blurry". Canvas downscales cleanly but cannot invent detail when upscaling to 512, so the 192 and 512 outputs go soft. Re-export the source at 512×512+ or feed an SVG for sharp results everywhere.
Favicon size reference: what each file is for
These are the exact files this generator outputs, with the filename and target each size serves. Filenames match the conventions the bundled HTML and manifest snippets expect.
| Size | Filename | Used for |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab (default) |
| 32×32 | favicon-32x32.png | Browser tab (high-DPI) |
| 48×48 | favicon-48x48.png | Windows taskbar shortcut |
| 96×96 | favicon-96x96.png | Chrome desktop shortcut |
| 180×180 | apple-touch-icon.png | iOS home screen (Apple Touch Icon) |
| 192×192 | android-chrome-192x192.png | Android home screen (PWA manifest) |
| 512×512 | android-chrome-512x512.png | Android splash screen / PWA install |
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. |
The detail most favicon tools skip
This generator renders with imageSmoothingQuality = 'high' on a 2D canvas and a contain fit — it scales by Math.min(target/width, target/height) and centres the result, so every output is square and undistorted even from a non-square source. The bundled HTML snippet ships a theme-color meta tag set to #ffffff; change it to your brand hex so the mobile browser chrome matches your icon. And the snippet links 16/32/48 PNGs plus the manifest — it deliberately omits a 96px <link> because no browser requests 96 in markup (it is a shortcut/manifest size only), so adding it would just bloat your <head>.
One real gotcha: Chrome caches favicons for weeks. After changing an icon, append a version query (/favicon-32x32.png?v=2) to each <link href> to force a refresh — bumping a file is not enough on its own.
Designing an icon that reads at 16×16
1. One strong silhouette
At 16×16 you have ~256 pixels to carry one idea. Use a single bold shape — a letter, a monogram, or one icon — not a busy combination mark.
2. High contrast both ways
The icon must read on light and dark tabs. Pure black or pure white fills fail on one side; use brand colours with contrast against both.
3. Avoid thin strokes
Strokes under ~1.5px vanish in the 16×16 raster. If your logo uses thin lines, draw a simplified favicon variant — most major brands do.
4. Padding for iOS
iOS masks the apple-touch-icon with rounded corners. Leave ~10% padding so corners do not clip content — use the padding slider above.
Runs 100% in your browser
Your image never leaves your device. The tool reads the file with FileReader, draws it onto an in-memory <canvas> at each size, and saves the PNGs through the browser's native Blob download — no uploads, nothing leaves your device. I tested it with square PNGs, a wide non-square banner, a transparent logo, and a vector SVG, at every background option and padding from 0% to 25%, plus a deliberately tiny 128px source to confirm the under-192px blur warning fires.
Frequently asked questions
Is this favicon generator free?
Yes — 100% free with no signup and no watermark. The PNGs, HTML snippet, and manifest are yours to use in any personal or commercial project, because the tool renders everything locally in your browser.
Does my image get uploaded anywhere?
No. Resizing runs entirely in your browser through the Canvas API, with no fetch calls. Disconnect your network after the page loads and the generator keeps working.
Do I still need a favicon.ico in 2026?
Mostly no for new projects — an SVG plus a 32×32 PNG fallback covers modern browsers. Keep a root /favicon.icoonly if you support Internet Explorer or feed readers that request it by exact path. This tool outputs PNGs; add an ICO with a separate converter if you need it.
Why does my favicon still look blurry?
Usually the source is under 192px (upscaling blurs), too detailed for 16×16, or a JPEG whose artefacts smear at small sizes. Start from a 512×512+ PNG or an SVG. The widget warns you when a source is smaller than 192px.
Related design & web utilities
Shrink the source image before you generate
Image to Base64Inline a tiny SVG favicon directly in HTML
Color PickerSample a brand hex for the background plate
Open Graph GeneratorBuild the og: tags that sit beside your favicon
Meta Tag PreviewerPreview how your icon and title show in SERPs
HTML FormatterTidy the <head> snippet before you paste it
HTML Entity ConverterEscape characters in your head markup safely
QR Code GeneratorLinkable site previews for printed material
CSS MinifierCompress the styles that ship with your icon
Aspect Ratio CalculatorCrop a source to a clean square first
Guide: Open Graph Meta TagsHow icons, og:image & head tags fit together
All ToolsBrowse the full Toolk utility hub
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.