9 min read · updated August 2, 2026
Favicon Generator Guide: Sizes, ICO Format, and Setup
Favicon Generator
Generate all favicon sizes from one image — free, no signup
A favicon generator takes one square source image and produces every icon size a website needs: the classic favicon.ico for browser tabs, PNG icons at 16 through 512 pixels, the 180-pixel Apple Touch icon for iOS home screens, and the manifest entries Android uses for installed web apps. Doing this by hand means a dozen exports and a stack of HTML tags; a generator turns it into one upload.
The reason this is a whole category of tool rather than a single resize is that four ecosystems — desktop browsers, iOS, Android, and installable web apps — each grew their own icon conventions over two decades, and none of them were retired when the next arrived. A site that only ships a 16-pixel favicon.ico still works in a browser tab, but shows a blurry mess when someone pins it to an iPhone home screen or installs it as an app.
This guide covers which sizes are actually requested in practice, how the ICO container format works under the hood, the minimal HTML that wires everything up, and the design adjustments that keep a logo legible at 16 pixels.
The sizes that matter and the ones you can skip
Favicon size lists online run to fifteen or twenty entries, most of them fossils. The working set in 2026 is much shorter, and it is worth knowing what each piece is actually for so you can debug when one surface shows the wrong icon.
Everything else — the 57, 72, 114, and 144 pixel Apple sizes, Windows 8 tile images, dozens of intermediate PNGs — served devices that are long gone. Modern iOS scales the single 180-pixel Touch icon to whatever it needs, and desktop browsers happily downscale a 32-pixel icon for high-density displays.
- favicon.ico containing 16 by 16, 32 by 32, and 48 by 48 versions: the backstop that browsers request from the site root even with no HTML tag present, and what older bookmark systems read
- A 32 by 32 PNG (or an SVG) linked as the icon: what current desktop browsers actually render in the tab
- apple-touch-icon.png at 180 by 180: what iOS uses when someone adds the site to their home screen; without it, iOS renders a shrunken screenshot of the page
- 192 by 192 and 512 by 512 PNGs referenced from manifest.json: what Android Chrome uses for home-screen shortcuts and what installable web apps use for the app icon and splash screen
- An SVG favicon, optionally: scales perfectly and can adapt to dark mode with embedded CSS, but you still ship the ICO alongside it for older agents and non-tab surfaces
How the ICO format and downscaling actually work
The ICO format, inherited from Windows, is not a single image — it is a container. The file starts with a directory listing how many images it holds and the size and bit depth of each, followed by the image data itself, which in modern files is usually embedded PNG data for each entry. When a browser needs a tab icon on a standard display it pulls the 16-pixel entry; on a 2x display it pulls the 32; a bookmark manager might take the 48. One file, one request, every density served with an image drawn for that exact size.
The quality of a generated icon set lives or dies on resampling — the algorithm that computes each small pixel from the source. Naive nearest-neighbor scaling picks one source pixel per output pixel and produces jagged, shimmering edges. Good generators use area-averaging or Lanczos filtering, where each output pixel is a weighted blend of all the source pixels it covers, preserving smooth curves and consistent stroke weight. At 16 pixels the difference is stark: a 512-pixel logo becomes either a recognizable mark or unreadable noise depending entirely on the filter.
This is also why the standard advice is a 512 by 512 source. Downscaling from a large, sharp original gives the filter maximum information to average from, and 512 is the largest size any manifest entry needs, so nothing ever has to be upscaled. Upscaling a small source cannot recover detail that was never captured — a 64-pixel logo blown up to 512 just becomes a soft 512-pixel blur that then downscales badly everywhere else.
The HTML and manifest that wire it together
Generated files do nothing until the site references them. The head section needs a link tag with rel icon pointing at the ICO (or the ICO simply placed at the site root, where browsers look by convention), a second icon link for the 32-pixel PNG or SVG, and a link with rel apple-touch-icon for the 180-pixel iOS image. Sites with a web manifest add a link rel manifest tag, and the manifest JSON lists the 192 and 512 icons with their sizes and MIME types, plus the theme color used around the icon on splash screens.
Two operational details cause most of the support questions. First, favicons are cached far more aggressively than pages — browsers may hold an old icon for weeks, so after a redesign, appending a version query string to the icon URLs (icon.png?v=2) is the reliable way to force the swap. Second, path mistakes fail silently: a manifest that 404s, or icons referenced with paths that break on nested routes, just means some surfaces quietly fall back to nothing. Absolute paths from the site root avoid the whole class of bug.
A good generator hands you the tags and the manifest.json ready to paste, which is less about saving typing and more about eliminating the silent-failure cases — the sizes attribute matching the actual file, the MIME types being right, and every referenced file actually existing in the package.
Designing a mark that survives 16 pixels
The most common favicon failure is not technical, it is design: shrinking a full logo — wordmark, tagline, fine linework — down to a tab icon and getting an illegible smudge. A 16 by 16 canvas holds 256 pixels total; a lowercase letterform might get 40 of them. The fix is to treat the favicon as its own asset derived from the brand, not a miniature of the logo.
The working rules: use the simplest distinctive element you own — a monogram letter, a geometric mark, a distinctive silhouette — and drop everything else. Thicken strokes beyond what looks right at full size, because a 1-point line at 512 pixels rounds to nothing at 16. Prefer high contrast between mark and background, and check the icon against both light and dark tab bars, since browsers no longer guarantee either; a dark navy mark vanishes on a dark theme unless it sits on a filled background or gets a light outline.
Two platform-specific notes. The Apple Touch icon should not rely on transparency — iOS composites transparent regions onto black and applies its own rounded-corner mask, so ship it with a filled background and let iOS do the rounding. And for maskable Android icons, keep the mark inside the central 80 percent of the canvas, because the launcher may crop the icon into a circle and anything near the corners is lost.
When you actually reach for a favicon generator
In practice this tool comes out at a handful of predictable moments in a project's life.
- Launching a site: the favicon is the classic day-before-launch item; a generator turns the logo file you already have into the full package in one pass instead of an hour of manual exports
- Silencing the 404: even a site that does not care about branding gets a request for favicon.ico on every first visit, and generating a real one removes the persistent error from server logs
- Shipping a PWA: installable web apps hard-require the 192 and 512 manifest icons — the install prompt will not appear without them — so the generator output is a functional prerequisite, not a polish item
- A rebrand: every size must be regenerated together and cache-busted with a version parameter, or users see the old mark in tabs for weeks after the new logo ships
- Client handoffs: agencies generate the full package per client site so the deliverable includes correct icons for tabs, home screens, and installs, rather than whatever single PNG was lying around
- White-label and multi-tenant apps: one generation run per tenant brand keeps dozens of skinned deployments each showing their own identity in the tab bar
Common questions
Favicon Generator FAQs
- What size should a favicon be?
- Ship a favicon.ico containing 16, 32, and 48 pixel versions, a 180 by 180 Apple Touch icon, and 192 and 512 pixel PNGs in the web manifest. That set covers browser tabs, iOS home screens, Android shortcuts, and app installs. Generate everything from a single sharp 512 by 512 source so no size is ever upscaled.
- Do I still need a favicon.ico file in 2026?
- Yes, keep it. Browsers still request /favicon.ico from the site root as a fallback when no icon link is present, and various bookmark systems, feed readers, and crawlers read it directly. It costs nothing to include in a generated package, and dropping it means a 404 on many first visits and a blank icon on the surfaces that only know the old convention.
- How do I make a favicon from my logo?
- Start from the largest, cleanest version of the logo, crop it square, and simplify it to its strongest single element — usually a monogram or symbol, never the full wordmark. Upload that to a favicon generator, which resamples it to every required size and packages the ICO, PNGs, and manifest. Check the 16-pixel preview specifically; if the mark is unreadable there, simplify further and regenerate.
- Why is my new favicon not showing up?
- Almost always caching: browsers hold favicons for weeks and do not revalidate them with normal page reloads. Append a version query string to the icon URLs in your HTML, such as icon.png?v=2, to force every visitor to fetch the new file. Also confirm the files return 200 and the paths are absolute from the site root, since a silently 404ing icon shows the same symptom.
- What is an Apple Touch icon and do I need one?
- It is the 180 by 180 pixel image iOS uses when someone adds your site to their iPhone or iPad home screen. Without it, iOS falls back to a tiny screenshot of the page, which looks broken next to real app icons. Give it a filled background rather than transparency, because iOS composites transparent areas onto black and applies its own corner rounding.
- Can I use an SVG file as a favicon?
- Modern desktop browsers accept an SVG favicon via a standard icon link, and it scales perfectly and can even switch colors for dark mode using embedded CSS. Support is not universal across every surface that consumes icons, though — Safari lagged on it for years, and home-screen and manifest icons still require raster PNGs. Ship SVG as an enhancement alongside the ICO and PNG set, not instead of it.
Favicons are a small deliverable with an outsized failure mode: get them wrong and the brand looks broken in the one place — the tab bar — where users see it all day. The good news is that the whole problem reduces to one decision and one upload. Decide on a mark that survives 16 pixels, prepare it once at 512 by 512, and let tooling fan it out to the formats each platform demands.
The ToolDoor Favicon Generator does the fan-out: upload one square image and it renders the PNG icon set from 16 through 512 pixels, with a preview of every size so you can confirm the mark still reads at 16 pixels before downloading each file. It is free and requires no signup.
Nearby doors