Favicon Sizes and Files for Modern Websites

Browser tabs, bookmarks, iOS home screens, and PWA install prompts all pull icons from your site. They do not share one universal file. Ship only a legacy favicon.ico and you may still get blurry tabs, missing home-screen artwork, or incomplete PWA manifests.

This guide explains the favicon files web projects actually need and how to produce them from one logo.

The core idea: standard filenames, multiple sizes

Modern web favicon workflows start with a single square logo. From that source, you export a small set of files with predictable names and place them in your site root.

You do not need to manually resize in a design tool for each file. A browser-based Favicon Generator can export the full pack locally, including an HTML snippet and site.webmanifest.

Browser tab and bookmark icons

Desktop and mobile browsers still look for classic favicon formats:

Most teams include both favicon.ico and PNG fallbacks. Browsers pick the best match from your HTML <link> tags.

Example head tags:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

iOS and iPadOS home screen icons

When someone saves your site to their home screen, Apple looks for apple-touch-icon.png at 180 by 180 pixels. This file is separate from your tab favicon and should be a full-bleed square PNG.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Use artwork with enough padding so rounded iOS masks do not clip important details at the corners.

PWA manifest icons

Progressive web apps declare icons in site.webmanifest (or manifest.json). The Web App Manifest spec commonly expects:

Example manifest snippet:

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Link the manifest from your HTML:

<link rel="manifest" href="/site.webmanifest">

Update name, short_name, and color values to match your brand before you ship.

SVG favicons (optional)

If your source logo is SVG, you can also serve a vector favicon for browsers that support it:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

SVG favicons stay sharp at any zoom level. Keep a PNG or ICO fallback for older browsers and contexts that ignore SVG.

Minimum vs recommended favicon pack

You can launch with a smaller set, but a complete pack covers more surfaces:

If you are building a PWA or expect mobile home-screen saves, export the full recommended set from day one.

How to export the full set efficiently

1. Prepare a 512px or larger square PNG or SVG
2. Open the Favicon Generator and upload the file
3. Select the files your project needs
4. Generate once and download the ZIP
5. Copy files to your site root and paste the HTML snippet into your layout

Because Vidsembly's generator runs in the browser, your logo stays on your device. That is helpful when icons represent unreleased products or client brands under NDA.

For a walkthrough of each step, see How to Generate Favicons from One Logo.

Common mistakes to avoid

Using only one PNG size. A single 32px file may look soft on high-density displays. Export 16px and 32px PNGs plus a multi-size ICO.

Wrong file location. Favicons belong in the site root unless your framework maps a public/ folder there. Broken paths are the most common favicon bug.

Skipping the HTML snippet. Browsers fall back to /favicon.ico if present, but explicit <link> tags improve consistency across Safari, Chrome, and Firefox.

Forgetting to edit the manifest. Generated site.webmanifest files use placeholder names and colors. Update them before launch.

Not checking 16px legibility. Fine text and thin strokes disappear at tab size. Always review the smallest exports.

Favicons vs app store icons

Website favicons use fixed filenames like apple-touch-icon.png and android-chrome-512x512.png. App store submissions need a broader PNG ladder at sizes like 1024px and 512px with different naming conventions.

Use the Favicon Generator for web projects. Use the App Icon Generator when you also need store-ready app icon exports. For platform-specific app sizes, read App Icon Sizes for iOS, Android, and PWAs.

Summary

One well-prepared logo plus a consistent export workflow keeps tabs, bookmarks, and install prompts looking sharp. Generate the pack once, verify small sizes, and ship with confidence.