The Complete Favicon Size Guide

All standard favicon sizes at a glance

favicon.ico — the classic format

The .ico format is a container that can hold multiple image sizes in a single file. A typical favicon.ico bundles 16×16, 32×32, and 48×48 pixel images together. The browser picks the most appropriate size automatically.

Place favicon.ico in the root of your web server. Browsers look for it there by default, even without an explicit <link> tag:

https://yoursite.com/favicon.ico

Most browsers still request this file as a fallback. If you only do one thing for favicon support, generating a proper multi-size ICO file is it.

SVG favicon — the modern approach

SVG favicons are supported in all modern browsers (Chrome, Firefox, Safari 12+, Edge). Because SVG is resolution-independent, a single SVG file looks sharp at any size — in tabs, on Retina screens, and when zoomed in.

SVG favicons also support dark mode via CSS media queries inside the SVG itself:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: #1a1a1a; }
  </style>
  <!-- your icon paths -->
</svg>

Reference the SVG file in your HTML:

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

Apple Touch Icon (180×180)

When a user adds your site to their iPhone or iPad home screen, iOS looks for an Apple Touch Icon. The recommended size is 180×180 pixels (for iPhone 6 and later at 3× DPI). iOS automatically applies rounded corners and a subtle drop shadow — do not add these to the image yourself.

The image should be a square PNG with your logo or icon centered with some padding. Provide it with this HTML:

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

If you want to provide a different image for older Apple devices, you can use sizes to target specific sizes (152×152 for iPad Retina, 120×120 for iPhone Retina), but the 180×180 image is downscaled gracefully for older devices and is usually sufficient.

PWA icons (192×192 and 512×512)

Progressive Web Apps (PWAs) require icons defined in the Web App Manifest (manifest.json). Two sizes are considered standard:

• 192×192 — used for Android home screen icons and Chrome bookmarks
• 512×512 — used for splash screens when a PWA is launching

Reference these in your manifest file:

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

Complete HTML head implementation

Here is the minimal, complete set of favicon declarations for good cross-platform coverage:

<!-- Classic ICO (multi-size: 16, 32, 48) -->
<link rel="icon" href="/favicon.ico" sizes="any" />

<!-- SVG for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<!-- Web App Manifest for PWA -->
<link rel="manifest" href="/manifest.json" />

The order matters: browsers process link tags in order and may stop once they find a supported format. Listing the ICO first ensures backward compatibility, while the SVG tag is picked up by modern browsers that support it.

Design tips for readable favicons

A favicon is displayed at 16–32px in the browser tab — not much space. Keep these guidelines in mind when designing:

• Use a simplified version of your logo. Full wordmarks and complex illustrations will not read at small sizes. Use an icon mark, monogram, or single letter instead.
• Use high contrast. A low-contrast favicon disappears against the browser chrome. Ensure your icon has at least a 4.5:1 contrast ratio.
• Avoid thin strokes. Strokes below 2–3px become invisible at 16×16. Design with boldness.
• Use a solid or very simple background. Transparent favicons can look washed out on browser tab bars.
• Test in an actual browser tab. The 512px design rarely predicts how the icon will look at 16px. Always check small.

Generate all sizes with ImageLab

ImageLab has two tools for favicon generation:

• The Favicon Generator takes a single PNG image and produces all standard sizes — 16, 32, 48, 180, 192, and 512 pixels — packaged in a ZIP file ready to deploy.
• The SVG/PNG/ICO Converter converts between SVG, PNG, and ICO formats. Upload an SVG or PNG logo and download a properly-sized ICO file with multiple embedded sizes.

Both tools process everything in your browser — no files are uploaded to a server.