Favicon Generator
Upload any image — get pixel-perfect favicons at 16, 32, 48, and 64px. Runs entirely in your browser.
Add these <link> tags inside your <head>:
Favicon Sizes Compared: Which Ones Actually Matter for Your Website?
Most website owners think about favicons once, drop a 16×16 PNG in their root folder, and call it done. Then they notice their logo looks like a blurry smear on a retina display, or worse — a generic browser icon shows up on a new iPad tab. The truth is that favicon requirements have quietly multiplied over the past decade, and what was sufficient in 2010 is now embarrassingly incomplete.
Let's walk through exactly what each size does, where it appears, and how to decide which combination is worth your time.
16×16: The Original Favicon
This is where it all started — the tiny square that appears in browser tabs on desktop Chrome, Firefox, and Safari. At 16 pixels, you're working with an almost absurdly small canvas. A detailed logo with thin letterforms or fine linework simply will not survive at this resolution. What works here is bold, solid shapes: a single initial, a geometric mark, or a high-contrast simplified version of your logo.
The critical mistake people make at 16×16 is downscaling a full logo and expecting it to look good. Browser-level downscaling uses basic interpolation algorithms that blur edges and muddy colors. The right approach is to create or export a version of your icon that's been hand-tuned for this tiny size — even if that means deliberately simplifying or thickening strokes.
32×32: The Workhorse
If you could only pick one size, 32×32 would be the pragmatic choice. Windows taskbar icons, browser tab favicons on some configurations, and a range of site-pinning scenarios all use this dimension. It gives you four times the pixel count of 16×16, which sounds modest but makes a dramatic difference in legibility. Two-letter abbreviations become readable. Simple wordmarks can survive. A solid logomark can look genuinely crisp.
This is also the size Apple's Safari uses when users save a page as a web bookmark in older iOS configurations, and it's what shows up in many Windows browser taskbar pins. Chrome on HiDPI displays sometimes renders the 32px version scaled up to fill a larger hit area, which is why the quality of your 32px icon matters more than people assume.
48×48: The Windows Sweet Spot
Windows has always operated at multiples of 16 pixels for icon sizes: 16, 32, 48, 64. The 48×48 favicon is specifically important for desktop Windows users who pin sites to their taskbar or who use browser features that display larger icon previews. It's also used by some Windows Explorer contexts when a site shortcut ends up on the desktop.
Compared to 32×32, 48×48 lets you introduce subtle details that were impossible at smaller sizes — thin outlines, simple gradients, secondary elements. But the same principle holds: a favicon at 48px is not a thumbnail of your full logo. It's a purpose-built icon that happens to share your brand's visual language.
Many favicon generators skip this size entirely, which is why Windows users sometimes see pixelated or awkwardly scaled icons in their taskbars. Including 48×48 is a small effort with a disproportionate payoff for anyone whose audience skews toward Windows desktop users.
64×64: High-DPI and Apple Touch Considerations
At 64 pixels, you're entering territory where real design detail becomes possible. This size matters for a few specific contexts: some browser extensions render favicons at larger sizes when displaying bookmark lists, certain Windows icon contexts use 64×64, and it serves as a reasonable base for the retina/HiDPI browsers that scale 32×32 up by 2x.
There's also an indirect benefit: starting with a 64×64 source gives you a clean downscaling path to all smaller sizes. If you generate your 16, 32, and 48px icons from a 64px original rather than from a 512px logo file, you get more predictable pixel-level results because the source is already close in resolution to the targets.
One thing 64×64 is not is an Apple touch icon. Apple's home screen icons start at 120×120 for non-retina and 180×180 for retina devices. Those require a separate <link rel="apple-touch-icon"> tag entirely. Don't confuse the two — a 64px favicon placed where a 180px touch icon is expected will look terrible on an iPhone home screen.
The Background Color Question
This trips up a lot of people. When you export a favicon from a design tool that uses a transparent background, you're betting that browsers will render that transparency well — and many do not. Chrome on Windows renders transparent favicons against a white or gray background depending on the system theme. Dark mode users may see your white logo vanish into a white browser background.
The safer approach for most brands is to choose a solid background color that matches or complements your brand palette. A circular or rounded-square shape on a flat background reads as a modern app icon and performs consistently across every surface where favicons appear. Reserve transparent backgrounds for cases where you've tested across light and dark themes and confirmed the result looks intentional.
Fit Mode: Cover vs. Contain vs. Stretch
When your source image isn't square, you need a strategy for fitting it into a square favicon canvas. These three approaches produce very different results:
Cover scales the image so the shorter dimension fills the canvas, then center-crops. This is usually right for square or near-square logos — it fills the favicon without any padding, which reads as more intentional and bold at small sizes. The tradeoff is that wide logos lose their left and right edges.
Contain fits the entire image inside the canvas with letterboxing. This is the safer choice for wide wordmarks or images where cropping would destroy the meaning. You'll want to pair it with a solid background color rather than transparency, or the padding areas look accidental.
Stretch distorts the image to fill the canvas exactly. It's almost never the right choice unless your source is already square — but it can occasionally be useful for abstract marks where the exact proportions don't matter.
The HTML Implementation Side
Generating the PNG files is only half the job. How you reference them in your HTML determines which size each browser actually loads. The modern recommended approach uses multiple <link rel="icon"> tags with explicit size attributes:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">Browsers use these hints to select the most appropriate size for their current context. Without the size attributes, the browser picks whichever icon it receives first, which may or may not be appropriate for where it's being displayed.
You can also bundle multiple sizes into a single .ico file, which is the classic Windows approach. An ICO file is essentially a container format that holds multiple bitmap sizes — browsers that encounter it extract whichever size they need. The PNG-per-size approach has largely replaced it for modern web development, but the favicon.ico file in your root directory is still worth keeping for legacy browser compatibility and for contexts that specifically request it.
When to Revisit Your Favicon
If you've never thought about your favicon since the site launched, now is the time. Check it in Chrome, Firefox, and Safari. Pin a tab and zoom in on a HiDPI display. Save the page as a bookmark on Windows and look at the taskbar. These quick tests will reveal whether your current favicon is doing its job or quietly undermining your brand at every touchpoint.
A well-crafted favicon at the right sizes is one of those small details that separates sites that feel professionally built from ones that feel like they were shipped in a hurry. It takes twenty minutes to get right, and once done, you rarely have to touch it again.