Favicon Sizes and Formats: A Complete Guide

A modern favicon set is small: a multi-size favicon.ico, one SVG if you want it, a 180-pixel Apple touch icon, and 192- and 512-pixel PNGs for Android. Ship those with four lines of HTML and a short manifest and you have covered every browser and platform that matters.

The reason there are so many sizes is that a favicon is rendered at wildly different scales — a 16-pixel tab, a taskbar button, a phone home screen — and rescaling one big image down to 16 pixels looks muddy. The fix is to supply the right pixels for each place. That starts with understanding what an .ico file even is.

What an .ico file actually is

An .ico is not a single image. It is a container that holds several complete images at different sizes inside one file. When the browser or operating system needs a 16-pixel icon, it opens the .ico, finds the 16-pixel image already inside, and uses it directly — instead of taking a large image and shrinking it on the fly.

Which sizes matter, and where

You do not need every size a generator can emit. You need these, and each one has a job.

The 16, 32 and 48 sizes all go inside the single favicon.ico. The 180-pixel Apple touch icon and the 192- and 512-pixel Android icons are separate PNG files, referenced from your HTML and web app manifest respectively.

The HTML that ties it together

Put your files in the site root and add this block to the page head. It is deliberately short — the days of pasting twenty link tags are over.

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

The first line points every browser at the .ico as a universal fallback. The second offers an SVG to browsers that prefer it. The third gives iOS its opaque touch icon. The fourth links the manifest that Android reads. A favicon generator can produce all of these files and hand you this exact snippet.

The web app manifest

The manifest is a small JSON file that tells Android and installable web apps which icons to use for the home screen. This is where the 192- and 512-pixel PNGs are declared.

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#0b0b0c",
  "background_color": "#0b0b0c",
  "display": "standalone"
}

What "maskable" means

Android uses adaptive icons: the launcher crops your icon into whatever shape the device theme wants — a circle, a squircle, a rounded square. An icon marked with purpose: "maskable" promises that its important content sits inside a safe zone, so the launcher can crop the edges without slicing off part of your mark.

The practical rule is padding. Keep the logo within the central circle, roughly the middle 80 percent of the canvas, and fill the outer margin with the background colour. Give the maskable icon its own file so a normal (non-maskable) icon can stay full-bleed while the maskable one keeps its safe padding.

Designing an icon that reads at 16 pixels

The hardest constraint is the smallest size. A favicon has to be legible at 16 by 16 pixels — a square barely wider than a text character. A full logo with a wordmark simply cannot survive that. The letters collapse into a few grey smears and the whole thing reads as noise.

So do not shrink your logo. Design a favicon on purpose:

• Use a single mark, a monogram, or one letter — not the full lockup with a wordmark.
• Favour one bold shape with high contrast against the background.
• Drop fine detail and thin strokes; they vanish at 16 pixels and alias badly.
• Test it at actual size in a real browser tab, not zoomed in at 400 percent.

Start from a source that scales cleanly: a square SVG, or a PNG that is at least 512 pixels on each side. Working down from a large, square master keeps every generated size sharp. If your artwork is an SVG, rasterise it to a big PNG first with the SVG to PNG tool, and use the color picker to pull your exact brand colour for the manifest fields.

SVG favicons vs .ico

Modern browsers accept an SVG favicon, and it has real appeal: one vector file stays sharp at every size and can even adapt to dark mode with a media query. But support is not universal across every browser and platform, and older environments ignore it entirely.

That is why the .ico remains the safest baseline. Ship the .ico for guaranteed coverage, add the SVG as a progressive enhancement for browsers that want it, and you lose nothing. If you only need the container itself, the ICO generator builds a multi-resolution .ico from a PNG.

Common favicon mistakes

Most broken favicons come from a short list of avoidable errors. Check yours against these before you ship.

• Shrinking a full logo instead of designing a dedicated 16-pixel mark, so the tab shows grey mush.
• A transparent Apple touch icon that iOS backs with black — give it a solid fill.
• Relying on the browser to guess: with no favicon.ico at the site root, some clients show nothing.
• Caching. Browsers hold onto favicons aggressively, so a change may need a hard refresh or a new file name to appear.
• A maskable icon with content pushed to the edges, which Android then crops into.

The caching one trips up almost everyone. If you swap a favicon and the old one refuses to update, you are usually looking at a cached copy rather than a broken file — confirm the file itself is correct before you go chasing a bug that is not there.

Quick answers

Do I still need a favicon.ico?

Yes. It is the one format every browser and platform reads, so it is the fallback that guarantees an icon shows up. Add an SVG on top if you like, but keep the .ico.

Why does my icon look black on iPhone?

Because the Apple touch icon has transparent pixels. iOS renders transparency as black over its white rounded rectangle. Give the 180-pixel touch icon a solid, opaque background and the problem disappears.

How many sizes do I really need?

Practically: 16, 32 and 48 inside the .ico, a 180 Apple touch icon, and 192 and 512 for Android. That covers tabs, taskbars, desktops and home screens without bloating your set.

Are these tools private?

Yes. Favicon and .ico generation on Pixora happens in your browser, so your source artwork is never uploaded to a server.