Favicon Size: Resolution, Aspect Ratio and Multiple Icon Versions
What size a favicon should be: why it's square, which pixel sizes common platforms use, how SVG fits in, and how to declare multiple favicon sizes in HTML.
Contents
- The short answer: a square icon in several sizes, not one magic number
- Common favicon sizes and where they appear
- Aspect ratio: always square
- Resolution versus vector: what an SVG favicon does and does not solve
- Check that the source artwork is genuinely vector
- Declaring multiple favicon sizes in HTML
- A practical favicon delivery checklist
- Gaps in this assessment
The short answer: a square icon in several sizes, not one magic number
There is no single correct favicon size. A favicon is a square, 1:1 icon that browsers, operating systems and search engines display at different pixel dimensions, so a site usually supplies several versions. The common baseline is a small multi-resolution ICO file (typically containing 16×16, 32×32 and often 48×48 pixel images), an SVG version for browsers that accept it, a 180×180 PNG for Apple home-screen shortcuts, and 192×192 and 512×512 PNGs referenced from a web app manifest for Android and installable web apps.
These figures are widely used conventions rather than measurements taken for this article. No subject-specific evidence was supplied, and browser and platform requirements change over time, so confirm them against current vendor documentation before finalizing a delivery.
Common favicon sizes and where they appear
| Asset | Typical pixel size | Format | Typical use |
| Classic favicon | 16×16, 32×32, 48×48 (bundled) | ICO | Browser tabs, bookmarks, older browsers and tools that request the file by default |
| Scalable favicon | No fixed pixel size; square viewBox | SVG | Modern browsers that support SVG icons; renders crisply at any tab size |
| Apple touch icon | 180×180 | PNG | iOS and iPadOS home-screen shortcuts |
| Manifest icons | 192×192 and 512×512 | PNG | Android home screen, install prompts and splash screens for web apps |
Aspect ratio: always square
Favicon width and height should be equal. Non-square artwork gets letterboxed, stretched or cropped depending on the platform. If a logo is a wide wordmark, the practical fix is not to squeeze it into a square but to use a compact element of the brand, such as a monogram, symbol or initial, centered on a square canvas with some breathing room around it.
Resolution versus vector: what an SVG favicon does and does not solve
An SVG favicon describes shapes mathematically, so it has no inherent pixel resolution and scales cleanly. That makes it a good master source and a good delivery format for browsers that support it. It does not remove the need for raster files: the ICO fallback, the Apple touch icon and the manifest icons are still PNG or ICO images at fixed pixel sizes, exported from that vector master.
Scaling is not the same as legibility. Detail that reads well in a full-size logo often collapses into a blur at 16×16 pixels. For the smallest sizes, a simplified version with thicker strokes, fewer elements and no fine text usually performs better than a straight reduction of the full logo. Some designers produce a separate pixel-tuned 16×16 and 32×32 drawing for this reason; that is an editorial judgment about quality, not a technical requirement.
Check that the source artwork is genuinely vector
A file ending in .svg, .ai, .eps or .pdf is not proof of editable vector paths. Any of these containers can hold an embedded raster image, in which case scaling it up will still produce blur and pixelation. Open the file in a vector editor and confirm that the mark consists of paths and shapes rather than a placed bitmap. Likewise, a PNG or JPG preview of a logo is a raster image and is a weak starting point for favicon production.
If the favicon is being built from a logo you did not create, being able to download the file does not by itself grant permission to modify the artwork, use its fonts or apply the trademark. Confirm usage rights with the brand owner before adapting the mark.
Declaring multiple favicon sizes in HTML
Favicons are declared with link elements in the page head. The sizes attribute tells the browser the pixel dimensions of a raster icon so it can pick a suitable one; for an SVG, the type attribute identifies it as a scalable image. A typical set looks like this, with file names adjusted to your own project:
<link rel="icon" href="favicon.ico" sizes="32x32">
<link rel="icon" href="icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.webmanifest">The larger Android and install icons are listed inside the manifest file rather than in the HTML:
{
"icons": [
{ "src": "icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}A practical favicon delivery checklist
- Start from a confirmed vector master with real paths, not an embedded bitmap.
- Design or adapt a square, simplified mark that stays legible at 16×16 pixels.
- Export an SVG favicon from the master for modern browsers.
- Build an ICO containing 16×16, 32×32 and 48×48 raster versions as a fallback.
- Export a 180×180 PNG Apple touch icon, ideally with a solid background, since transparent areas may be filled by the system.
- Export 192×192 and 512×512 PNGs and list them in the web app manifest.
- Add the link elements to the page head and test the result in the browsers and devices your audience uses.
- Check current search engine favicon guidance, which typically requires a square icon above a minimum size.
Gaps in this assessment
No specific logo, tool, browser version or test data was provided, so this article does not assess any particular file, compare export tools or state which browser versions support SVG favicons. The sizes listed reflect commonly documented conventions; verify them against current browser, operating system and search engine documentation for your launch date.