The Complete Favicon Guide

Favicons are the tiny icons that represent your site in browser tabs, bookmarks, history, home-screen shortcuts, and search results. This guide explains what a modern favicon set looks like in 2026, why each file exists, and exactly how to ship one that works everywhere.

Last updated: 30 May 2026

What a favicon is and why it matters

A favicon (short for "favorite icon") is the small image a browser shows next to your page title in a tab, in the bookmarks bar, in the history list, and in autocomplete suggestions. The name is a relic of the late 1990s, but the role has grown far beyond that single tab icon. The same family of icons is now used for home-screen shortcuts on iOS and Android, for installed Progressive Web Apps (PWAs), for pinned tiles, and for the little thumbnails that show up in some search and social previews.

A favicon is the smallest piece of branding you will ever ship, and one of the most visible. People scan tabs constantly. A crisp, recognizable icon makes your site easy to find among twenty open tabs; a blurry, generic, or missing one quietly erodes trust. Getting it right is cheap and worth doing once, properly.

The catch is that "a favicon" is no longer a single file. Different platforms want different formats, sizes, and metadata. The good news: a small, well-chosen set covers essentially every browser and device in use today, and you can generate the whole set from one logo with Logo2Favicon.

The formats and sizes that matter today

You do not need dozens of files. Modern browsers have consolidated around a compact set. Here is what to include and why each piece exists.

favicon.ico (multi-resolution: 16, 32, 48)

The classic .ico file is still the most reliable fallback. It is a container format that can hold several sizes in one file; ship it with 16×16, 32×32, and 48×48 images inside. Browsers automatically request /favicon.ico from the site root even if you never reference it, and older browsers, feed readers, and some operating-system surfaces still prefer it. Place it at the root and you have a guaranteed baseline.

PNG favicons (16, 32, 48, 96)

Modern browsers prefer PNG icons declared in the page's <head> because PNG handles transparency and color better than legacy ICO. The sizes that earn their place are 16×16 (tab and bookmark), 32×32 (Retina tabs and the Windows taskbar), 48×48 (some desktop shortcuts), and 96×96 (occasional higher-density surfaces). The browser picks the closest match to the size it needs, so supplying a couple of crisp sizes beats scaling one giant image down.

apple-touch-icon (180)

When someone adds your site to the iOS or iPadOS home screen, Safari uses the apple-touch-icon. A single 180×180 PNG is enough for every current Apple device; iOS downscales it for older hardware. Do not add transparency or rounded corners - iOS applies its own rounded mask, so a full-bleed square on an opaque background looks best.

android-chrome (192 and 512)

Android and Chrome use icons declared in your web manifest. The two that matter are 192×192 (home screen and app launcher) and 512×512 (splash screens and the install prompt). These are referenced from manifest.webmanifest rather than the page <head>.

maskable icon (512)

Android's "adaptive icons" crop your icon into a circle, squircle, rounded square, or other shape depending on the device. A maskable icon is a 512×512 PNG designed with a safe zone: keep the important artwork within the central circle (roughly the inner 80%) and let the background fill the corners. Declare it in the manifest with "purpose": "maskable" so Android knows it can be cropped without losing the logo.

mstile (150)

Older Microsoft surfaces (pinned tiles on the Windows Start menu from the Internet Explorer / legacy Edge era) read a 150×150 tile image plus a small browserconfig.xml and a msapplication-TileColor meta tag. This matters less every year, but it costs almost nothing to include and avoids an ugly fallback for the users who still rely on it.

For the full, definitive table of every size, what reads it, and which ones you can safely skip, see our icon sizes reference.

How to add favicons to your site's <head>

For a plain HTML site, reference the icons with <link> and <meta> tags inside <head>. A complete, modern set looks like this:

ICO fallback: <link rel="icon" href="/favicon.ico" sizes="any">
PNG icons: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> (repeat for 16, 48, 96)
Apple touch icon: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Manifest: <link rel="manifest" href="/manifest.webmanifest"> (this is where the 192, 512, and maskable Android icons are declared)
Theme color: <meta name="theme-color" content="#0f172a"> to tint browser UI on mobile

The order is not critical, but the principle is: declare a couple of PNG sizes, keep the ICO as a root-level safety net, point Apple at one large touch icon, and let the manifest own everything Android and PWA related.

The web manifest

The manifest is a small JSON file that ties the Android and PWA icons together. Its icons array lists each PNG with its size and purpose. Include your 192 and 512 standard icons, and a separate 512 entry marked "maskable". Add a name, short_name, theme_color, and background_color so installed shortcuts and splash screens look intentional rather than default.

How to wire them up in Next.js (App Router)

Next.js 16's App Router can generate every one of these tags for you through its metadata system, so you rarely need to hand-write <link> tags. There are two complementary approaches.

File conventions (the simplest path)

Drop specially named files into your app/ directory and Next wires up the correct tags automatically:

app/favicon.ico - served at the root and linked automatically.
app/icon.png (or icon.svg) - becomes a rel="icon" link; you can add icon1.png, icon2.png, etc. for multiple sizes.
app/apple-icon.png - becomes the apple-touch-iconlink (use your 180×180 here).
app/manifest.webmanifest (or a manifest.ts route) - becomes the manifest link and holds the Android 192/512 and maskable icons.

The metadata object (explicit control)

When you want exact control over paths and sizes, export a metadata object (or generateMetadata) from a layout or page and let Next render the tags:

icons.icon - an array of your PNG and ICO entries, each with a url, type, and sizes.
icons.apple- your 180×180 apple-touch-icon.
icons.other - anything bespoke, such as the mstile image.
manifest - the path to your manifest.webmanifest.
themeColor - exported from the separate viewport object in modern Next, which renders the theme-color meta tag.

Either way, generate the actual image files first (Next does not create the artwork for you), reference them with correct sizes, and let the framework emit clean, deduplicated tags into every page's head.

Common mistakes to avoid

Shipping only one size.A single 512×512 PNG scaled down to 16×16 by the browser looks muddy. Provide at least a 16 and a 32 so small tabs stay sharp.
No manifest. Without manifest.webmanifest, Android home-screen icons and the PWA install prompt fall back to a screenshot or a generic glyph. The manifest is what makes the 192, 512, and maskable icons work.
Forgetting the maskable purpose. If your 512 icon is not marked "purpose": "maskable"with a safe zone, Android may crop your logo's edges off inside its adaptive shape.
Transparency on the Apple touch icon. iOS fills transparent pixels with black. Use a full, opaque background and let iOS apply its own rounded corners.
Wrong paths. Icons are requested relative to the site, so absolute root paths (/favicon-32x32.png) are safest. A 404 on an icon silently downgrades you to the ugly default.
Caching surprises. Browsers and CDNs cache favicons aggressively - sometimes for days. After updating an icon, hard-refresh, test in a private window, and consider versioning the filename (for example favicon-32x32.v2.png) so the new icon is fetched immediately rather than after the old one expires.
Tiny details lost at 16px. A logo with fine text or thin strokes turns to mush at favicon scale. Use a simplified mark - a monogram, symbol, or bold glyph - for the smallest sizes.

Generate the full set in seconds

You do not have to build this set by hand. Drop one logo into the Logo2Favicon generator and it produces every file above - multi-resolution favicon.ico, the PNG sizes, the 180 apple-touch-icon, the Android 192/512 and maskable icons, the mstile, the web manifest, and the ready-to-paste <head> snippet - entirely in your browser. Nothing is uploaded; your logo never leaves your device.

Want to double-check exactly which size goes where before you generate? Keep the icon sizes reference open alongside this guide, browse the rest of our guides, or skim the FAQ for quick answers. Spotted an error or have a suggestion? Email info@Logo2Favicon.com.