Favicon Generator
Upload one image, download every favicon size — 16 to 512 px PNGs plus the HTML link tags. Runs entirely in your browser.
1,143 views
Could not read image — try PNG/JPG/WebP
The Sizes That Matter in 2026
Different devices and contexts each expect a different favicon size, because a favicon is not one file — it is a family of files. Browser tabs use tiny 16×16 and 32×32 pixel PNGs. iOS's "Add to Home Screen" uses a 180×180 apple-touch-icon. Android and installed PWAs pull 192×192 and 512×512 pixel icons from the web app manifest for their home-screen and splash-screen art. A single source image cannot serve all of these directly — a 512 px logo squeezed straight into a 16 px tab loses almost all of its detail, and a 16 px icon stretched up to 512 px looks blurry and blocky. So the correct approach is to render one high-resolution source down to each target size individually, redrawing the pixels fresh at every size rather than scaling one output from another.
That is exactly what this tool does: it loads your source image onto an HTML canvas in your browser and resizes it to all six standard sizes — 16, 32, 48, 180, 192 and 512 pixels — each drawn directly from the original, then hands you the matching PNGs plus the <link> tags to paste into your site's <head>. Nothing uploads; the resizing happens with the Canvas API on your own device.
Designing for the Smallest Size
Because so much detail is lost at 16 px, favicon design works backward from the smallest size, not the largest. Crop to the logo mark rather than a full wordmark — text becomes an unreadable smear below about 24 px. Keep strong contrast against both light and dark tab bars, since browsers switch between themes. A solid background color usually reads better than transparency at the smallest sizes, where a few semi-transparent edge pixels can look like noise. Many brands maintain a simplified "app icon" version of their logo — a single letter, initial or glyph — specifically because their full logo does not survive the 16 px test.
It also helps to understand the manifest file that ties the 192 and 512 pixel icons together for installable sites: the web app manifest (manifest.json) references those two sizes by URL so Android and desktop PWA installers know which icon to fetch for the home screen and app switcher. Sites that skip the manifest icons are still fully functional — the browser tab and iOS home screen icons work independently — but the install prompt itself may fall back to a generic icon or decline to offer installation at all.
Frequently Asked Questions
Do I still need a .ico file?
Rarely. Every modern browser accepts PNG favicons declared through the sizes attribute in a link tag. Keeping a /favicon.ico at your site root only helps very old user agents and tools that request that hardcoded legacy path directly.
What image should I upload?
A square image, ideally 512 px or larger, PNG or a raster exported from SVG with the mark centered and enough padding around it. Non-square images are center-cropped to a square before resizing so nothing gets stretched.
Why does my icon look blurry or muddy at 16 px?
Sixteen pixels physically cannot hold fine detail — thin strokes, gradients and small text dissolve into a blur. Simplify the source mark, increase contrast, or design a dedicated small-size version if your full logo does not survive the smallest tab icon.
What is the difference between the 192 px and 512 px icons?
Both feed Android and PWA manifests: 192 px is used for the home-screen icon at normal density, while 512 px is used for high-density screens and the splash screen shown while a PWA is loading — Android picks whichever fits the context.
Do I need to add every size, or just a couple?
For a modern site, 32 px plus the 180 px apple-touch-icon covers the vast majority of visitors. Add the 192/512 px manifest icons only if the site is installable as a PWA; the 16 and 48 px sizes mainly help legacy contexts.
Similar Tools
Report a Problem
Favicon Generator
Comments
No comments yet — be the first to write one!