Image Compressor
Shrink JPG, PNG and WebP with a quality slider and live size readout.
Image & Photo
Favicon Generator
Every icon size plus manifest.json and the HTML snippet, zipped.
What it does. A favicon generator produces every icon size a website needs from a single source image. This tool outputs 16, 32, 48, 180, 192 and 512 pixel PNGs, a multi-resolution ICO, a ready-to-use manifest.json, and the exact HTML to paste into your head — packaged as a ZIP, generated on your device.
Runs in your browserNothing uploadsNo signupWorks offline
How to use Favicon Generator
- Upload a square source image, ideally 512×512 or larger. SVG and PNG give the sharpest results.
- Choose a background color for the maskable icon and check the previews at each size.
- Download the ZIP and paste the generated HTML snippet into your site’s head.
Which favicon sizes do I actually need in 2026?
The historically-recommended set ran to seventeen files. Modern browsers have consolidated, and six covers everything that matters.
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16 + 32 + 48 | Legacy browsers, and the root-path request browsers make anyway |
| favicon-32x32.png | 32 × 32 | Standard browser tab on standard-DPI screens |
| favicon-16x16.png | 16 × 16 | Bookmark bars, older tab rendering |
| apple-touch-icon.png | 180 × 180 | iOS home screen, Safari pinned tabs |
| icon-192.png | 192 × 192 | Android home screen, PWA install |
| icon-512.png | 512 × 512 | PWA splash screen, app store listings |
One addition is worth making: a maskable icon. Android applies its own shape mask — circle, squircle, rounded square depending on the launcher — and crops whatever falls outside it. A maskable icon reserves a 20% safe zone on every edge so the crop never clips your mark. This tool generates one automatically.
Why does my favicon look like mud at 16 pixels?
Because 16×16 is 256 pixels total, and most logos carry more detail than that can represent.
A wordmark is unreadable below about 60 pixels wide. A logo with fine strokes turns to grey mush once each stroke falls below one pixel. Gradients band. Drop shadows disappear entirely.
The fix is to design a separate mark for small sizes rather than scaling the full logo down: a single letter, a monogram, or the most distinctive shape from your logo, with strokes at least 2 pixels wide at 16×16, and a contrast ratio above 3:1 against both light and dark tab backgrounds. Check both — a dark logo on a transparent background vanishes entirely in dark mode.
What goes in the HTML head?
Less than most guides suggest. Browsers request /favicon.ico from the site root automatically, so that file needs no tag at all — but the explicit tags let you control caching and paths.
<link rel="icon" href="/favicon.ico" sizes="48x48">— the legacy fallback<link rel="icon" href="/icon.svg" type="image/svg+xml">— an SVG icon scales to every size from one file and can respond to dark mode with a media query inside the SVG<link rel="apple-touch-icon" href="/apple-touch-icon.png">— iOS ignores the manifest for this<link rel="manifest" href="/manifest.webmanifest">— Android and PWA icons come from here, not from link tags
Note that iOS does not read the web app manifest for its home-screen icon, which is the single most common reason a PWA looks right on Android and wrong on iPhone. The apple-touch-icon tag is not optional.
Should I use an SVG favicon?
Yes, as the primary, with PNG fallbacks. A single SVG scales to every display density without extra files, and it can adapt to dark mode using a prefers-color-scheme media query embedded in the SVG itself — something no raster format can do.
Support is good across Chrome, Edge and Firefox. Safari does not support SVG favicons for tabs, which is exactly what the PNG fallbacks are for. Declare the SVG first and the ICO second; browsers pick the best format they understand.
Frequently asked questions
What size should my source image be?
512×512 or larger, square, with the subject centered and some padding. SVG is ideal because it rasterizes cleanly at every target size.
Do I still need favicon.ico?
Yes. Browsers request it from the site root regardless of your link tags, and a missing file produces a 404 in your logs on every page load. Keeping it also covers older browsers.
Where do the files go?
The site root. Root placement is what makes the automatic /favicon.ico request succeed, and it keeps the manifest paths simple.
Why has my favicon not updated?
Favicons are cached aggressively — sometimes for weeks. Hard-refresh, or append a query string such as /favicon.ico?v=2 to the link tag to force browsers to re-fetch.
What is a maskable icon?
An Android icon with a 20% safe margin on all sides, so a launcher can crop it to a circle or squircle without cutting into your mark. It is declared with "purpose": "maskable" in the manifest.
Can I use a photo as a favicon?
Technically yes, practically no. Photographs carry far too much detail to survive a reduction to 16 pixels. Use a simple, high-contrast graphic mark.
Is my logo uploaded?
No. All resizing and ICO packaging happens on a canvas in this page, and the ZIP is assembled in memory before download.
Guides for Favicon Generator
- PNG vs JPG vs WebP: Which Format to Use8 min read