Favicon Size Guide: Every Icon Dimension, Format, and HTML Tag You Need

Overview

A favicon is a small visual identifier for a website. It may appear in a browser tab, a bookmark, browser history, a search interface, or a shortcut saved to a mobile home screen. The same source mark is often reused across several contexts, but each context can have different requirements for dimensions, transparency, shape, and file format.

The useful question is not simply “What is the favicon size?” It is: “Which icon files does this website need, and where will each file be used?” A small personal site may work well with one SVG or PNG favicon and a fallback ICO file. A web application that can be installed on a device needs a more complete set, including manifest icons and an Apple touch icon.

Use this guide as a planning reference rather than a rigid rulebook. Browser support, framework conventions, and platform behavior can change. When a platform or deployment tool has a documented requirement, treat that requirement as the deciding input.

Quick favicon size reference

• 16 × 16 pixels: a traditional small browser and bookmark icon size.
• 32 × 32 pixels: a useful standard size for browser interfaces and higher-density displays.
• 48 × 48 pixels: a practical additional raster size for contexts that request a larger icon.
• 180 × 180 pixels: commonly used as an Apple touch icon size for iOS-style home-screen shortcuts.
• 192 × 192 pixels: a common web app manifest icon size.
• 512 × 512 pixels: a common larger manifest icon size for installable web applications.
• Scalable SVG: useful for modern browsers when the artwork is simple, legible, and suitable for vector rendering.

These dimensions should be treated as an asset-planning baseline. An icon set is complete only after it has been tested in the browsers, devices, and installation flows that matter to the site.

How to estimate

To estimate the favicon files you need, start with the environments your site actually supports. Count the required use cases, then assign an icon format and dimension to each one. This avoids exporting every possible size without knowing why it exists.

Step 1: List the visible contexts

Make a short inventory of where the identity may appear:

1. Browser tabs and desktop bookmarks.
2. Mobile browser shortcuts or saved home-screen links.
3. Installable progressive web app surfaces.
4. Safari pinned tabs, if the site specifically supports that experience.
5. Framework-specific metadata or static asset conventions.

Step 2: Choose the minimum asset set

For a straightforward website, a practical starting set is an SVG favicon plus a PNG or ICO fallback. For a site with mobile shortcut support, add a 180 × 180 PNG. For a progressive web app, add manifest icons at 192 × 192 and 512 × 512 pixels, then confirm whether the design needs additional purpose-specific variants.

Think of the estimate as a simple coverage calculation:

Required asset set = browser assets + mobile shortcut assets + app-install assets + platform-specific assets

If a category does not apply, leave it out. The goal is reliable rendering and a manageable source of truth, not the largest possible folder of duplicate files.

Step 3: Check the artwork at final size

A logo that looks clear at 512 pixels may become unreadable at 16 pixels. Reduce the mark to its smallest intended size and inspect its silhouette, contrast, and internal spacing. If text disappears or thin details merge, create a simplified favicon variant rather than shrinking the full logo.

A logo-to-favicon workflow can help separate the main brand mark from the compact symbol used in browser interfaces. You can also compare export options in a favicon generator, provided you review the generated files and privacy practices before using them.

Inputs and assumptions

The right favicon configuration depends on a few technical and design inputs. Record these before exporting files or adding tags.

Format: SVG, PNG, or ICO?

SVG is a good choice for a simple vector mark because one file can scale across display sizes. It is especially convenient when your build system and target browsers handle SVG favicons as expected. Keep the SVG clean, compact, and free of unnecessary embedded content.

PNG is useful when the icon includes raster detail, transparency, or a carefully tuned pixel-level design. Export separate PNG files for important target dimensions instead of assuming that one bitmap will look equally sharp everywhere.

ICO remains a useful fallback because it can contain multiple embedded sizes in one file. A multi-size ICO may include 16 × 16, 32 × 32, and 48 × 48 versions. If you use ICO, verify that each embedded image is actually present and not merely a resized copy of a low-resolution source.

For a deeper comparison, see this guide to PNG, ICO, and Apple touch icons.

Transparency and background assumptions

Transparent artwork can work well on a light interface but lose contrast on a dark browser theme or a colored shortcut background. Test both. If the mark depends on a background color, include that background in the asset rather than relying on the interface to supply it consistently.

HTML and manifest inputs

A basic HTML setup might look like this:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The exact markup can vary by framework. In a manifest, a typical icon declaration includes the file path, dimensions, and MIME type:

{
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Use paths that match the deployed site, not just the local development server. A missing leading slash, incorrect public directory, or case mismatch can make an otherwise valid favicon appear broken.

Worked examples

Example 1: Documentation site

Assume a documentation site needs a browser-tab icon, bookmark support, and a simple visual mark that works in light and dark browser themes. It does not offer installation as a web app.

A reasonable estimate is:

• One simplified SVG favicon.
• One ICO fallback containing common small sizes.
• Optional 32 × 32 and 48 × 48 PNG files if a specific tool or deployment environment requests them.

The main design decision is legibility. A short wordmark is likely to fail at 16 pixels, so use a symbol, initial, or compact geometric form.

Example 2: Creator portfolio

Assume a portfolio needs browser identification and a home-screen shortcut on mobile devices. It uses a colorful illustrated avatar rather than a geometric logo.

The estimated set could include an SVG if the avatar is vector-based, a PNG fallback, and a 180 × 180 Apple touch icon. The avatar should be cropped consistently across files, with the face or defining feature kept away from the outer edge so platform masking does not remove important detail.

For related profile assets, keep the favicon’s compact symbol visually connected to the portfolio’s profile picture. A consistent color, outline, or facial feature can link the two without forcing the full avatar into a tiny square.

Example 3: Installable web application

Assume an application needs browser-tab branding and manifest icons for installation. In addition to the HTML favicon, prepare at least a 192 × 192 PNG and a 512 × 512 PNG, then test the manifest, icon paths, and installed shortcut appearance.

Do not assume that a browser-tab favicon and an app icon should be identical. The app icon may need more padding, a solid background, or a simplified mark because it will be displayed at a larger size and may be placed inside a system-defined shape.

When to recalculate

Revisit the favicon plan whenever the site’s identity or delivery environment changes. This is not a recurring cost calculation; it is a coverage check. Recalculate the asset set when you:

• Change the logo, brand colors, typography, or visual identity.
• Introduce a dark theme or discover contrast problems.
• Add a progressive web app manifest or installable experience.
• Migrate to a framework such as React, Vite, or Next.js.
• Move static files, change the public directory, or alter the deployment path.
• Launch a new subdomain that needs a distinct identity.
• Receive reports that the favicon is missing, stale, blurry, or inconsistent.

After every update, test a private browsing window and a previously visited page. Favicon caching can make a corrected file appear unchanged for a while, so compare the actual network request and deployed file path before replacing working markup. If the icon still does not appear, use this favicon troubleshooting checklist.

Finally, keep a small asset inventory in the repository: source artwork, exported dimensions, file formats, HTML references, manifest references, and the date of the last review. Test the smallest icon first, then confirm the larger mobile and app assets. This repeatable process keeps the favicon for your website sharp, discoverable, and aligned with the rest of its visual identity.