Favicons, From One Image to a Full Set
After reading this you will know which favicon sizes browsers and devices actually request, why one square source image at 512 pixels is enough, and how to paste the generated HTML so every platform picks the right icon.
What a favicon set really is
A favicon is the small square image a browser shows in a tab, a bookmark, a history list, or on a phone home screen. The name comes from "favorites icon" in Internet Explorer, where a single 16x16 file named favicon.ico was enough. That era is over. A modern site serves the same artwork at many sizes and in several file formats, because a browser tab wants a tiny crisp icon while an Android home screen wants a large one.
The generator takes one square image and produces the whole family: a multi-size .ico, a set of PNG icons, an Apple touch icon, Android icons, a site.webmanifest file, and the HTML lines that tie them together. Instead of exporting a dozen files by hand in an image editor, you produce them in one pass and get consistent results across every size.
Everything runs in your browser. The source image is resized locally with a canvas, and the ZIP is built in memory. No file leaves your machine.
The sizes that matter and why
Different clients ask for different pixel dimensions. Here are the ones worth generating and where each is used.
| File | Size (px) | Used by |
|---|---|---|
| favicon.ico | 16, 32, 48 | Legacy browsers, Windows shortcuts |
| favicon-16x16.png | 16 | Browser tab at 1x |
| favicon-32x32.png | 32 | Browser tab at 2x, taskbar |
| apple-touch-icon.png | 180 | iOS home screen |
| android-chrome-192x192.png | 192 | Android home screen |
| android-chrome-512x512.png | 512 | Android splash, PWA install |
The .ico container is special: a single file can hold several bitmaps. Packing 16, 32, and 48 into one favicon.ico lets an old browser choose the closest match without a separate request. The PNG icons cover modern browsers that read the <link> tags directly. The 180 pixel Apple touch icon and the 192 and 512 pixel Android icons cover mobile home screens and progressive web app installs.
Why the source must be 512 and square
Every output is a downscale of your source. Downscaling loses detail cleanly; upscaling invents detail and looks soft. If your source is 512x512, the largest target (also 512) is a direct copy, and every smaller size is a reduction. If your source is only 128x128, then the 192 and 512 icons must be enlarged, and edges turn blurry.
The scale factor from source to target tells you what happens:
Here t is the target size in pixels, d is your source dimension, and s is the scale factor. When s \le 1 you are downscaling and detail is preserved. When s \gt 1 you are upscaling and the result softens. With d = 512, the 512 target gives s = 1 and the 16 target gives s = 0.03125, both safe. With d = 128, the 512 target gives s = 4, a four times enlargement that no algorithm renders sharply.
Square matters because favicons are displayed in square slots. A 512x300 image gets letterboxed or cropped, and you lose control over which part survives. Crop to 1:1 before you start.
A worked example with the demo image
One 512x512 source to the full set
Load the default sample (a 512x512 square) and press Generate. The tool produces each asset by resizing the source to the target dimension. Follow the pixel math for four of them.
- favicon-16x16.png: scale s = 16 / 512 = 0.03125. The source shrinks by a factor of 32.
- favicon-32x32.png: scale s = 32 / 512 = 0.0625. A factor of 16 reduction.
- apple-touch-icon.png: scale s = 180 / 512 \approx 0.3516. Still a downscale, so it stays crisp.
- android-chrome-512x512.png: scale s = 512 / 512 = 1. A pixel-for-pixel copy.
The ZIP then bundles these PNGs, the packed favicon.ico, the manifest, and an HTML snippet. Because every scale factor is at most 1, no output is enlarged, and every icon looks sharp.
See downscale quality change with source size
Reading the generated HTML and manifest
The snippet you paste into the <head> looks like this in structure:
- <link rel="icon" ... sizes="32x32">
- Tells the browser which PNG to use for a given tab size. The browser reads the
sizesattribute and picks the closest match. - <link rel="apple-touch-icon" sizes="180x180">
- Points iOS at the home screen icon. Apple ignores the manifest for this, so the tag is required.
- <link rel="manifest" href="/site.webmanifest">
- Loads the manifest, a small JSON file that lists the Android icons, the app name, and theme colors used when a user installs the site.
The manifest lists the 192 and 512 icons under an icons array. Android and Chrome read that array to place the home screen icon and build the install splash. Keep the file paths in the manifest and the HTML pointing at the same folder where you upload the images, usually the site root.
Common mistakes
The biggest cause of a stale favicon is caching. Browsers hold favicons aggressively, sometimes for days. If your new icon does not show, hard-refresh, or test in a private window before you conclude the file is wrong.
Three other errors are frequent. First, uploading a small source: a 96x96 image forces the 192 and 512 icons to enlarge, so they blur. Start at 512 or larger. Second, fine detail: a 16x16 tab icon is 256 pixels total, so thin lines and small text vanish. Design a simple mark that survives at 16 pixels, not a shrunken logo. Third, forgetting the paths: if you upload the images to /assets/ but the HTML references the root, every icon 404s and the browser falls back to a blank square.
One more: transparency. A PNG with a transparent background looks fine in a light tab and disappears against a dark one. If your mark is a single color, add a background fill so it reads on any tab theme.
Related tools
Prepare your source before you generate, and shrink the output if a page is icon-heavy. Crop a rectangular logo to a clean square with the Aspect-Ratio Crop locked to 1:1. If your best copy is smaller than 512 pixels, enlarge it first with the Image Upscaler, though a true high resolution source always beats an upscaled one. To produce icons at exact custom dimensions outside this preset set, use the Image Resizer. And when a PNG icon file is heavier than it needs to be, run it through the Image Compressor.
Frequently asked questions
Do I still need a favicon.ico file in 2024?
Yes, keep it. Browsers still request /favicon.ico from the site root by default even without a link tag, and some tools and legacy clients rely on it. The generated .ico packs 16, 32, and 48 pixel versions in one file, so it covers those requests cleanly.
What size should my source image be?
At least 512x512 and square. That makes the 512 pixel Android icon a direct copy and every smaller size a sharp downscale. A larger source such as 1024x1024 is fine; it simply gives more room before any target hits a scale factor above 1.0.
Why does my icon look blurry only at small sizes?
A 16x16 icon holds 256 pixels. Fine strokes and text from a detailed logo cannot survive that reduction. The blur is a design problem, not a resize bug. Use a bold, simple mark and check it at 16 pixels before shipping.
My new favicon will not update, why?
Favicon caching. Browsers store the old icon and reuse it for a long time. Hard-refresh the page, clear the site data, or open a private window. Confirm the file loads by visiting its URL directly.
Where do I put the manifest and images?
Upload them to the folder your HTML references, typically the site root. The link tags and the manifest paths must match the real upload location, or the browser gets a 404 and shows a blank icon.
Related tools
Image Compressor
Shrink JPEG, WebP and PNG files with a live size preview.
Image Resizer
Resize one image or a whole batch to exact dimensions.
Aspect-Ratio Crop
Crop images freely or locked to presets like 1:1 and 16:9.
Image Upscaler
Enlarge images 2-4x with Lanczos or pixel-art algorithms.
Seam Carving (Content-Aware Resize)
Shrink or stretch a photo without squashing it: remove the boring pixels, keep the subject.
EXIF Viewer & Remover
See and strip photo metadata: camera, GPS, dates.