How to Resize a Favicon

The short answer

To resize a favicon well, avoid stretching one existing image to new dimensions. Go back to the vector master of the logo symbol and export a separate raster file at each pixel size you need. Simplify the artwork for the smallest sizes where necessary, package the files in the formats browsers and devices expect, update the references in your site's HTML, and then check the icon at real size. A favicon resizer or favicon size maker tool can automate the export step, but its output can only be as clean as the image you give it.

A few terms explain why this matters. A favicon is the small icon a browser shows in tabs, bookmarks and history, and that some devices use for home-screen shortcuts. Vector artwork describes shapes as mathematical paths, so it can be scaled to any size without losing sharpness. Raster artwork, such as PNG or JPEG, is a fixed grid of pixels. Resampling is what software does when it changes a raster image's pixel dimensions: it calculates new pixels from the old ones. Downsampling a large, simple image usually works acceptably. Upsampling a small one invents detail that was never there, which produces blur or jagged edges.

Why a single resized image often looks wrong

Favicons appear at very small pixel sizes. At that scale, thin strokes, fine gaps, small lettering and subtle gradients collapse into gray smudges. Scaling the full logo down mathematically keeps every detail proportionally correct but makes much of it illegible. This is why favicon work is partly a symbol-selection decision: the icon usually needs to be the logo's mark, monogram or a single distinctive letterform rather than the complete lockup with a wordmark and tagline.

Step 1: Start from the right source artwork

Use the original vector file of the logo if one exists, commonly supplied as SVG, AI, EPS or PDF. Open it and confirm the shapes are actually editable paths. A file extension does not prove the contents are vector: an SVG or PDF can simply wrap an embedded raster image, and that will not scale cleanly. An extension also says nothing about whether you have permission to adapt or reuse the logo; confirm usage rights separately if the artwork is not yours.

If only a raster logo is available, use the largest, cleanest version you can find. If even that is small or compressed, consider redrawing the symbol as vector paths before going further, because resizing cannot recover lost detail.

Step 2: Choose and prepare the symbol

• Isolate the most recognizable element of the logo, such as the icon mark or an initial, rather than the full logo with text.
• Place it on a square artboard, since favicon slots are square. An artboard is the defined canvas area that sets the export boundaries.
• Leave a consistent margin around the shape so it does not touch the edges, and keep the visual weight centered.
• Decide on the background: a transparent background lets the shape sit directly on the browser's tab color, while a solid tile gives predictable contrast. Check that a transparent icon stays visible against both light and dark browser themes.

Step 3: Simplify for small sizes

Preview the artwork at the actual target size, not zoomed in. If parts disappear or merge, create a simplified variant for the smallest sizes: thicken strokes, widen gaps, remove secondary details and drop any small text. Many designers also align key edges to whole pixels at the smallest sizes, a practice often called pixel snapping or pixel-grid alignment, so straight edges render crisp rather than as soft half-tone lines. These are design recommendations, not technical requirements, but they usually make the biggest difference to legibility.

Step 4: Export each size separately

Export a PNG at each pixel dimension you need directly from the vector file, using the simplified variant for the smallest sizes if you made one. Exporting from vector at each size gives the renderer a fresh calculation every time, instead of compounding the losses of repeated raster resampling. Never create a larger favicon by enlarging a smaller exported file.

The table below lists sizes and formats that are widely used by convention. No current specification evidence was supplied for this guide, and platform requirements change, so confirm the exact set against the current documentation for the browsers and devices you need to support.

Use | Format commonly used | Size commonly used

Browser tabs and bookmarks (legacy-compatible) | ICO file containing several images | 16x16, 32x32 and 48x48 pixels

Browser tabs in modern browsers | SVG | Scalable; one file

Apple home-screen icon | PNG | 180x180 pixels

Web app manifest icons (Android and installable web apps) | PNG | 192x192 and 512x512 pixels

ICO is a container format: one ICO file can hold several bitmap images at different pixel sizes, and the browser picks the most suitable one. An SVG favicon scales to any size from a single file, which reduces the need for multiple exports in browsers that support it, though small-size legibility still depends on how simple the shape is. If you supply an SVG favicon, make sure it contains real vector paths and that any text has been converted to outlines, so it does not depend on fonts installed on the viewer's device.

Using a favicon resizer tool

Online favicon generators and resizers take one uploaded image and output a set of sized files, often with the matching HTML markup. They are convenient, but they resample automatically and cannot judge legibility. To get acceptable results, upload a large, square, high-quality image or a true vector SVG, then open each generated file at its real size and replace any that look muddy with a hand-simplified export. No evidence about specific tools was supplied, so compare their output quality and terms of use yourself.

Step 5: Install the new files

Replace the old favicon files on your site and update the link elements in the head section of your HTML so each one points to the correct file and, for PNG icons, declares the matching size. If your site uses a web app manifest, update the icon entries there as well. Content management systems and site builders often have a dedicated site-icon setting; if yours does, upload the largest suitable source there and check which sizes it generates automatically.

Step 6: Verify the result

• Browsers cache favicons aggressively, so check in a private window, after clearing the cache, or after changing the file name or adding a version parameter to the reference.
• View the icon in a browser tab at normal zoom, in both light and dark themes.
• Check bookmarks, browser history and, where relevant, a home-screen shortcut on a phone.
• Open each exported file at 100% size and confirm the edges are crisp and the symbol is still recognizable.
• Confirm that the files load without errors using your browser's developer tools network panel.

Gaps in this guide

No subject-specific evidence was supplied for this article, so it gives no tool recommendations, prices or test results, and the size table reflects common conventions rather than a confirmed current specification. Check current browser and platform documentation before finalizing the set of sizes you deliver.