Favicon Size Guide: Every Icon, PNG, ICO, and Apple Touch Icon You Need

Overview

There is no single favicon size that works perfectly in every context. Browsers and devices may display the same brand asset at different physical sizes, while operating systems and progressive web apps can request larger icons for shortcuts or installation. A reliable favicon set therefore combines a few purpose-built files rather than depending on one oversized image.

For most websites, the practical baseline is:

• SVG favicon: A scalable option for modern browsers when the artwork is simple and the implementation supports it.
• 32 × 32 PNG: A useful standard raster icon for browser tabs and general fallback use.
• 16 × 16 PNG: A small fallback that remains useful in compact browser interfaces.
• ICO file: A compatibility-oriented container that can include multiple sizes, commonly 16 × 16, 32 × 32, and 48 × 48.
• Apple touch icon: Often prepared at 180 × 180 for iOS and iPadOS home-screen use.
• Web app manifest icons: Commonly prepared at 192 × 192 and 512 × 512, with additional sizes when your installation targets require them.

These are working recommendations, not a replacement for testing the actual browsers, frameworks, and deployment environment used by your site. If you are starting with a logo, first simplify it for small display: remove fine detail, increase contrast, and test whether the identifying shape is still clear at 16 × 16.

For the design workflow behind these files, see How to Create a Favicon: A Practical Workflow From Logo to Browser Tab. If you need a broader reference covering dimensions and tags, keep the file, dimension, and HTML tag guide alongside this checklist.

Checklist by scenario

For a standard website

1. Create a clean square master artwork, preferably larger than the final display size.
2. Export an SVG if the design is suitable for vector rendering.
3. Export 16 × 16 and 32 × 32 PNG files for predictable raster fallbacks.
4. Provide a multi-size ICO file if compatibility with older tools, systems, or bookmark workflows matters.
5. Place the assets at stable public URLs, commonly in the site root or a dedicated assets directory.
6. Reference the files from the document head and verify that each URL returns the expected image.

A basic favicon HTML setup can look like this:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

The exact fallback order can vary by project. The important practice is to use accurate MIME types, dimensions, and paths, then test the result rather than assuming that a successful build means the icon is visible.

For a progressive web app

Add a web app manifest and include icons intended for installation surfaces. A representative manifest entry is:

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

Use a square composition with generous padding when an icon may be cropped or displayed inside a system shape. If your project supports maskable icons, prepare a version with a safe zone so the central mark remains visible after masking. The guide Maskable Icons Explained covers that distinction in more detail.

For a React, Vite, or Next.js project

Frameworks change where files belong and how metadata is declared, but they do not remove the need for correctly sized assets. Confirm whether your framework serves a public directory directly, generates metadata, or reserves special filenames for icons. Follow the implementation-specific references for React and Vite or Next.js App Router and metadata.

For a static site or GitHub Pages deployment

Use root-relative paths carefully, especially when the site is served from a repository subpath rather than a custom domain. Check the deployed URL, not only the local development URL. The GitHub Pages favicon setup guide includes a practical checklist for path and cache issues.

What to double-check

• Canvas shape: Every source should be square. Do not rely on transparent padding that makes the mark appear smaller than intended.
• Small-size legibility: Inspect the 16 × 16 and 32 × 32 exports at their actual size. Thin strokes and detailed lettering often disappear.
• Contrast: Test the icon against light and dark browser chrome. A transparent icon may need a background shape or border.
• Transparency: Decide whether transparent edges are intentional. A logo designed for a white canvas may look unfinished on dark surfaces.
• Format declarations: Match the file extension, MIME type, and declared dimensions. A mislabeled file can fail silently.
• Manifest consistency: Confirm that every manifest URL is reachable, every declared size matches the image, and the manifest itself is linked correctly.
• Cache behavior: When replacing an icon, use a deliberate cache-busting approach if visitors continue to see the old version. Test in a private window and a separate browser profile.
• Brand consistency: Compare the favicon with your site header, social avatar, and other visual identity assets. The favicon may need a simplified mark rather than a miniature version of the full logo. See how favicons differ from Open Graph images and avatars.
• Accessibility context: A favicon supports recognition but does not replace a descriptive page title, visible brand name, or accessible navigation.

Common mistakes

Using only a large PNG. A 512 × 512 image may be suitable for an app manifest but is not automatically the best browser-tab asset. Include small, optimized versions too.

Using the full logo without simplification. Wordmarks and complex illustrations become indistinct at favicon scale. A recognizable symbol, initial, or geometric mark usually performs better.

Confusing PNG and ICO. PNG is a straightforward raster image format; ICO can contain several icon images and remains useful as a compatibility fallback. Neither format fixes poor source artwork, incorrect paths, or missing metadata.

Forgetting the deployed path. Root-relative references can point to the wrong location on a subdirectory-hosted site. Inspect the final page source and request each icon URL directly.

Changing the file but not the URL. Browsers cache favicons aggressively in some workflows. A new filename or versioned query string can make a controlled update easier, provided your deployment and caching rules support it.

Testing only one browser. Check a representative desktop browser, a mobile browser, bookmarks or shortcuts, and—when relevant—your installed web app experience. Record which files each context actually uses.

When to revisit

Review this checklist whenever you change your logo, redesign the site, move hosting, introduce a framework, add PWA installation, or alter cache and asset pipelines. It is also worth revisiting before seasonal planning cycles or any release where your visual identity will be reused across new products and domains.

At minimum, schedule a quick favicon audit when:

• a new domain, subdomain, or repository path is introduced;
• the site changes from static HTML to a framework-managed application;
• you add a manifest, installable experience, or mobile shortcut;
• your brand mark changes or becomes difficult to recognize at small sizes;
• users report an outdated icon, broken image, or inconsistent browser display;
• your build, CDN, compression, or caching workflow changes.

Keep a small asset inventory with the filename, format, dimensions, intended use, and source artwork. After each update, open the deployed site, inspect the HTML and manifest, request the files directly, and check the icon at actual display sizes. That repeatable process is more dependable than adding every possible format without knowing whether each one works.

For ongoing brand maintenance, pair this technical check with a broader personal website branding checklist and review how often your favicon and profile picture should be refreshed using this identity audit guide.