A favicon is a small asset with a surprisingly broad job: it can identify a page in a browser tab, represent a saved bookmark, appear on a phone home screen, and supply the icon for an installable web app. This favicon size guide explains which dimensions and formats to prepare, which files are essential, how to connect them with HTML and a web app manifest, and when to review the set as your website changes.
Overview
There is no single favicon size that works equally well for every browser, device, and shortcut context. The practical approach is to create a small, deliberate icon set rather than rely on one oversized image. Each file should preserve the same visual identity while serving a particular display environment.
For a standard website, a compact baseline usually includes:
- 16 × 16 pixels: a traditional size for browser tabs and other small interface locations.
- 32 × 32 pixels: useful where a sharper browser or bookmark icon is displayed.
- 180 × 180 pixels: a common Apple touch icon size for saved web shortcuts.
- 192 × 192 and 512 × 512 pixels: practical manifest icon sizes for web app and shortcut use cases.
These dimensions are a planning baseline, not a guarantee that every operating system will display each file in exactly the same way. Browser and platform behavior can change, and frameworks may generate additional files automatically. Treat the table below as an implementation checklist that should be verified against the environments your site actually supports.
| Use case | Suggested dimensions | Typical format | Implementation note |
|---|---|---|---|
| Browser tab | 16 × 16, 32 × 32 | PNG or ICO | Keep the mark simple enough to remain recognizable at small scale. |
| Bookmarks and browser UI | 32 × 32 or larger source | PNG or ICO | Provide a clean, high-contrast version of the mark. |
| Apple home-screen shortcut | 180 × 180 | PNG | Link it explicitly with an apple-touch-icon tag. |
| Web app manifest | 192 × 192 and 512 × 512 | PNG | Declare each file in the manifest with its purpose. |
| Maskable app icon | Usually a dedicated large square source | PNG | Keep important artwork inside a safe area so platform masking does not crop it. |
| Safari pinned tab | Vector artwork | SVG | Use a simple monochrome silhouette and test the result in the intended context. |
For background on vector files, accessibility, and compatibility considerations, see the SVG favicon security and compatibility guide. If you are replacing an existing identity, the website favicon rebrand checklist covers cache and rollout concerns.
How to estimate
Estimating your favicon requirements is less about calculating a single number and more about mapping each place where the icon can appear. Start with the site’s delivery model and work outward.
- Identify the product type. A static marketing site may need only browser and shortcut icons. A progressive web app needs manifest icons, launch behavior, and testing at multiple display sizes.
- List the target surfaces. Include browser tabs, bookmarks, phone shortcuts, desktop shortcuts, pinned tabs, and installed-app surfaces that matter to your audience.
- Assign a file to each surface. Record the dimensions, format, filename, and HTML or manifest reference. This prevents a correctly designed asset from being omitted during deployment.
- Choose a source size. Begin with a clean square master that is large enough to export the required raster files. Do not assume that shrinking a detailed logo will produce a legible 16-pixel icon.
- Test at actual display sizes. Inspect the icon in a tab, bookmark list, phone shortcut, and installed-app context where relevant. The right dimensions cannot compensate for weak contrast or excessive detail.
A useful decision rule is: the more places your site’s identity appears, the more important it is to maintain a small family of purpose-built assets. A favicon generator can speed up export, but review every generated file and reference before publishing.
Inputs and assumptions
Before exporting, establish a few design and technical inputs.
Brand input
Use a symbol, initial, or simplified mark rather than a full wordmark when the icon will be displayed at 16 or 32 pixels. Check the silhouette in grayscale and at reduced size. Transparent backgrounds are often useful for browser icons, while a maskable app icon may need a background treatment that remains coherent after cropping.
Format input
PNG is a practical choice for most raster favicon files because it supports transparency and is widely handled. ICO remains useful for compatibility and can contain multiple embedded resolutions. SVG is valuable when a browser or platform supports a vector favicon, but it should be kept simple and tested rather than used automatically everywhere. The choice between favicon PNG and ICO should follow your browser coverage and deployment setup.
Path and reference input
Decide whether icons will live at the site root or in an assets directory. Confirm that the final paths work from the production domain, not only from a local development server. If you operate multiple domains, subdomains, or environments, document whether they share an icon or require separate branding. The guide to favicons across multiple domains and environments is useful for that audit.
Implementation input
A minimal HTML setup might look like this:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">For an installable web app, a manifest can declare separate purpose-specific files:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}The exact set of tags can vary by framework and platform. Avoid adding references to files that do not exist, and validate that the declared dimensions match the actual image dimensions.
Worked examples
Example 1: A content website
A content site with no installable app can start with a 16 × 16 PNG, a 32 × 32 PNG, an ICO fallback, and a 180 × 180 Apple touch icon. The design input is a simplified mark with strong contrast. The implementation input is a small set of link tags in the document head. If the site later adds a web app manifest, add the larger manifest icons and test the installation flow rather than assuming the existing tab icon is sufficient.
Example 2: A dashboard delivered as a progressive web app
A dashboard should plan for both browser discovery and installed use. Its icon set can include 16 × 16 and 32 × 32 browser assets, a 180 × 180 shortcut icon, and 192 × 192 and 512 × 512 manifest files. If the platform supports maskable icons in the intended deployment, create a separate version with protected artwork rather than reusing a tightly cropped logo. Check the result on light and dark surfaces and at the smallest practical size.
Example 3: A brand redesign
For a redesign, treat the favicon as a release asset, not an isolated image replacement. Export the complete set from the new master, update HTML and manifest references, check root paths, and test a fresh browser profile or cache-cleared session. If old and new icons appear unpredictably, follow a controlled rollout plan from the rebrand checklist.
When to recalculate
Revisit your favicon size and format decisions whenever the delivery context changes. The most useful triggers are a new progressive web app experience, a framework migration, a domain or subdomain change, a brand redesign, or a new requirement for phone and desktop shortcuts. Also review the set when a browser or operating system changes how a target surface handles icons.
A practical twice-yearly audit is simple:
- Open the production site in the browsers and devices that matter to your audience.
- Inspect a browser tab, bookmark, saved shortcut, and installed app if applicable.
- Confirm every HTML and manifest path returns the intended file.
- Compare declared dimensions with the actual exported dimensions.
- Check whether the icon remains recognizable beside competing tabs and on small screens.
- Record any platform or framework changes before updating the asset set.
Keep one documented source of truth for filenames, dimensions, formats, and references. That small habit makes future launches and rebrands easier to estimate. For a broader export workflow, see how to create a favicon from a logo, and for a complete reference of tags and formats, review the favicon size, format, and HTML guide.
