Favicon Sizes and Formats in 2026: What Your Site Actually Needs

A favicon stopped being just a tab decoration a long time ago. The same small set of images now gets pulled into surprisingly high-stakes places, each with its own preferred size and format.

Browser tabs, bookmarks, and history render your icon at 16x16 CSS pixels, doubled to 32x32 on high-density screens. Google shows favicons next to search results, so a missing or muddy icon makes your listing look less legitimate than the competitor above it. When someone saves your site to an iPhone home screen, iOS uses your apple-touch-icon as a full app icon. On Android, Chrome uses your manifest icons for the same job, and if your site is installable as a web app the 512-pixel icon becomes the splash screen graphic while it loads.

That is the whole list worth designing for. Windows Start-screen tiles, Safari pinned-tab silhouettes, and a dozen legacy iPad densities are not on it - more on those below.

Here is everything a normal site needs. If a checklist tells you to generate more than this, it is padding.

The files go in your site root (favicon.ico specifically belongs there). The HTML is a handful of link tags in your head: one for the ICO, one each for the two PNGs, one rel apple-touch-icon, and one rel manifest pointing at the webmanifest.

ICO is a 1990s Windows format, and yet dropping it is still a mistake in 2026. The reason is that browsers, crawlers, RSS readers, and countless scrapers request /favicon.ico from your site root by convention, without reading your HTML at all - any web server log shows a steady stream of those requests. If the file is missing, they get a 404 and your icon shows up blank in those contexts.

The format also has one genuine trick: a single .ico file is a container that can hold several sizes at once. A proper favicon.ico carries 16, 32, and 48 pixel images internally, and whatever reads it picks the closest match instead of scaling a wrong-sized one into mush. That is why a favicon.ico converted from a single PNG at one size is a downgrade - small renderings get resized on the fly and lose their edges.

So the practical rule: serve a multi-size favicon.ico at the root for everything that asks by convention, and serve the 16 and 32 pixel PNGs via link tags for modern browsers, which prefer them.

The apple-touch-icon has a sharp edge that catches almost everyone once. iOS does not composite transparent icons onto a nice background - it fills the transparent regions with solid black. A logo exported with a transparent background looks fine everywhere else and turns into a black square with a floating mark on an iPhone home screen.

The fix is to flatten the icon onto an explicit background colour before export: white, your brand colour, anything deliberate. iOS then rounds the corners itself, so do not pre-round them - a pre-rounded icon gets a second crop and shows dark slivers in the corners.

Give the mark some breathing room too: because iOS applies its own corner mask, artwork touching the edge of the 180x180 canvas gets clipped. Keeping the logo inside roughly the middle 80 percent is a safe rule of thumb, and it reads better as an app icon anyway.

Old favicon markup rarely breaks anything, but it bloats every page load and sends maintainers hunting for image files nobody consumes. All of the following can go:

Format questions are the easy half. The hard half is that your icon must work at 16x16, where a 256-pixel logo becomes a smudge. A few rules help.

Simplify aggressively. Use the symbol from your logo, not the wordmark - text is unreadable below about 32 pixels unless it is one or two letters. If your brand is typographic, a single-letter monogram on a solid colour outperforms a shrunken full logo every time.

Prefer bold shapes and high contrast over detail. Thin strokes vanish at small sizes, and subtle gradients flatten into noise. Check the icon against both a light and a dark tab bar; a dark navy mark disappears in a dark theme unless it has a lighter outline, a background chip, or an SVG variant that swaps colours via a prefers-color-scheme rule.

Finally, look at the result at 100 percent zoom, not scaled up in your design tool. A tab-sized render is the only honest preview.

You do not need Photoshop or a command-line ImageMagick incantation for any of this. FileTinker's favicon generator takes one image and produces the complete package described above in one pass: the multi-size favicon.ico with 16, 32, and 48 pixel entries, favicon-16x16.png and favicon-32x32.png, a 180x180 apple-touch-icon.png flattened onto a background colour so it will not go black on iOS, android-chrome-192x192.png and android-chrome-512x512.png, a site.webmanifest wiring the Android icons up, and a copy-paste head snippet with the matching link tags. Everything arrives as a single zip, and the processing happens entirely in your browser - the logo never leaves your machine.

Start from the largest, cleanest version of your logo you have; 512 pixels or more is ideal, since the biggest output is 512x512 and upscaling a small source gets soft. If the source is not square, the generator offers cover and contain fits: cover fills the frame and crops the overflow, contain fits the whole image inside and fills the rest with your chosen background colour. For precise control over which part of a wide logo survives, square it yourself first with the crop tool, then feed the square into the generator.

Pick the background colour deliberately even if your logo has no transparency - it is what iOS users see behind your mark and what fills the contain letterboxing. Then unzip the package into your site root, paste the snippet into your head, and deploy. If you only need one quick .ico for a side project, the image converter's PNG to ICO conversion produces a single-size icon in seconds, but for anything public-facing the full package is worth the extra minute.