Favicons Explained: Formats, Sizes, and How to Create One

A favicon is the small site icon that appears in browser tabs, bookmark lists, saved shortcuts, reading lists, and other places where your website needs a compact visual marker. It is one of the smallest assets in a web project, but it does more work than people expect. It helps users recognize your site quickly, separates your tab from a line of lookalike pages, and gives the brand a more finished feel.

That is why nearly every website should have one. A missing favicon does not break a page, but it does make the site feel incomplete. A good favicon adds recognition without asking for attention. A bad one becomes a blur, looks generic at small sizes, or disappears entirely when the browser switches themes.

What a favicon is, and the sizes that matter most

The original favicon idea was simple: a 16x16 pixel icon for browser bookmarks and tabs. That baseline still matters, because 16x16 is where readability gets tested. If the icon fails there, it usually fails everywhere else too.

Modern favicon setups often include more than one size. A practical set usually covers a small browser favicon, a larger PNG for general fallback use, and a touch icon for mobile home screens. If you are keeping the setup lean, think in terms of 16x16 and 32x32 for browser contexts, 48x48 as a useful larger raster fallback, and 180x180 for Apple touch icons. Some teams also include 192x192 for Android-style app surfaces.

The important point is not collecting every possible size. It is making sure the artwork holds up in the small ones and the exported files cover the places users actually see. If you need a starting graphic, free icons sized for favicons are easier to adapt when the underlying shape is already simple and recognizable.

SVG, ICO, and PNG each have a job

The format question matters because browser support and rendering behavior are not identical. Today, SVG is the most flexible choice for modern browsers because it scales cleanly, stays sharp on high-density displays, and can even react to light and dark themes when used carefully. That makes SVG attractive for sites that want one master file and a cleaner workflow.

ICO still matters because it remains the most familiar fallback for older browser behavior and default favicon lookups. In practice, many sites do not choose SVG or ICO. They use both. The common progressive pattern is to offer an .ico file for broad fallback support, then add an explicit SVG favicon link for browsers that support it.

PNG sits in the middle as a dependable raster export. It is useful for touch icons, larger fallback assets, and any context where you want a simple bitmap file with predictable rendering. If you are converting a PNG into a favicon, the key is to work from the largest clean source you have, simplify the artwork before export, and generate small sizes deliberately. You cannot add detail that is not in the original raster file, so the real quality work happens before export, not after it.

How to add a favicon with simple HTML

If you want the basic setup, HTML alone is enough. A traditional version can be as simple as linking a root favicon with <link rel="icon" href="/favicon.ico" type="image/x-icon">.

For a more current setup, many teams provide both a fallback ICO and an SVG file. A common pair is <link rel="icon" href="/favicon.ico" sizes="any"> together with <link rel="icon" href="/favicon.svg" type="image/svg+xml">.

If you also want a home screen icon for Apple devices, add a touch icon separately. That answers a common confusion point: browser tab icons and mobile home screen icons are related, but they are not exactly the same asset target. You often do need a separate touch icon because the home screen version is larger, more app-like, and viewed in a different context.

This is also where format decisions get practical. SVG is often the best primary source for modern browsers. ICO remains useful for compatibility. PNG is useful for touch icons and raster fallbacks. A small set of clear files beats an oversized export dump every time.

Designing a favicon that still works at 16x16

This is where many logos fail. A mark that looks polished on a hero section can collapse into noise when reduced to 16 pixels. Professional designers usually simplify hard before exporting. They remove fine detail, tighten the silhouette, increase contrast, and test the icon on both light and dark tab surfaces.

Good favicons rely on a few strong choices: one recognizable shape, minimal internal detail, and enough empty space that the icon does not turn into a dark square. Flat icons often work especially well because they are less dependent on tiny shadows or layered depth effects. If you want visuals that are easier to simplify, flat icons that work well as favicons make a better starting point than complex illustrations.

This is also where tooling helps. Designers often start with a logo or icon in Figma, Illustrator, or another vector tool, export an SVG, optimize it, then generate the fallback PNG and ICO assets from that source. Dedicated favicon generators can help package the files, but the tool does not fix weak artwork. The readable version has to be designed first.

Practical decisions for modern sites

If you are building a site today, use a simple modern stack. Keep one clean vector source. Export an SVG favicon for modern browsers. Include an ICO fallback for compatibility. Add a touch icon for mobile home screen use. That covers most real needs without turning favicon setup into a maintenance project.

Animated SVG favicons are technically possible in some modern environments, but they are not a default recommendation. Browser support and behavior are inconsistent, and motion at favicon size is easy to make distracting. The better use of SVG is usually adaptability, such as clean scaling or light and dark theme variants, not constant animation.

The short version is straightforward. Every website needs a favicon because recognition matters in crowded browser interfaces. The best format choice today is usually SVG plus ICO fallback, with PNG where raster outputs still make sense. The best size strategy starts with 16x16 readability, not with exporting every dimension you can think of. If the icon is clear at the smallest size and linked correctly in the head, the rest of the setup becomes much easier.