The Favicon Guide: Sizes, Formats and the HTML You Actually Need

A complete favicon set in 2026 needs just five files: a favicon.ico containing 16, 32 and 48-pixel versions, an SVG for modern browsers, a 180 by 180 PNG for iOS home screens, and 192 and 512-pixel PNGs referenced from a web manifest for Android and installable web apps. Four link tags in the page head tie them together. Everything else on the long lists you may have seen is legacy.

Which sizes actually get used

The favicon started as a single 16 by 16 image that Internet Explorer looked for at /favicon.ico. Every platform since has added its own expectations, and most of the confusion comes from guides that list all of them without saying which still matter. This is what each size is for today.

Size	Format	Used by	Still needed?
16 x 16	ICO or PNG	Browser tabs, bookmarks and history on standard screens	Yes
32 x 32	ICO or PNG	Tabs on high-density screens, Windows taskbar shortcuts	Yes
48 x 48	ICO	Windows desktop shortcuts; Google asks for a multiple of 48	Yes, inside the ICO
96 x 96 or 144 x 144	PNG	Google search results on desktop (any multiple of 48 is accepted)	Optional
180 x 180	PNG	iOS and iPadOS home screen (apple-touch-icon)	Yes
192 x 192	PNG	Android home screen, via the web manifest	Yes
512 x 512	PNG	Android splash screen and install prompt, via the manifest	Yes
Any	SVG	Tabs in Chrome, Firefox and Edge; scales cleanly and supports dark mode	Recommended
150 x 150 tile	PNG + browserconfig.xml	Windows 8 and old Edge start-screen tiles	No
Pinned-tab SVG	Single-colour SVG	Safari pinned tabs before version 12	No

Google is the one visitor with a precise rule: a favicon shown in search results must be square and a multiple of 48 pixels, so 48, 96 or 144, and it must not be blocked from crawling. A 48-pixel image inside your ICO satisfies this, but a dedicated 96 by 96 PNG gives Google a cleaner source to scale down.

ICO, PNG or SVG?

ICO is a container, not an image format. One .ico file holds several bitmaps at different sizes, and the browser picks the one that matches its display. That is its whole advantage: a single file at the root serves 16, 32 and 48-pixel needs, and every browser ever made understands it. The bitmaps inside are usually PNG-compressed in modern files, so a three-size ICO is typically 10 to 15 KB.

PNG is what everything outside the tab wants. iOS, Android and the manifest all require PNG icons at fixed sizes, and a PNG is also the easiest way to supply a 96 or 144-pixel version for Google. PNGs are lossless and support transparency, which is right for icons, but note the iOS exception below.

SVG is a vector description, so one file renders sharply at 16 pixels in a tab and 512 pixels in an install dialog. It can also respond to dark mode with a few lines of CSS inside the file. Chrome, Firefox and Edge have supported SVG favicons for years; Safari support arrived later and some versions still fall back to the ICO or PNG, which is why you keep the raster files too. An SVG favicon should be simple: a hand-written or well-optimised file of a few hundred bytes, not a 200 KB export with embedded fonts and filters.

The HTML that goes in the head

Place these four tags in the <head> of every page, or in your template. The order matters slightly: browsers that understand SVG pick it when it is listed first with a type, and older ones skip it.

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

The sizes="32x32" on the ICO line is a hint that stops Chrome choosing the ICO over the SVG. The apple-touch-icon tag needs no sizes attribute when you supply only the 180-pixel version; iOS scales it down for older devices. Use root-relative paths starting with a slash so the tags work on every page, including ones in subfolders.

Keep favicon.ico at the site root regardless of what the tags say. Browsers request /favicon.ico on their own for bookmarks and history, and RSS readers and link-preview services often fetch it without parsing your HTML at all. If it is missing, every one of those requests is a 404 in your logs.

Three tags you can leave out: rel="shortcut icon" (an Internet Explorer quirk; rel="icon" is the standard), rel="mask-icon" for Safari pinned tabs (Safari has used the normal icon since version 12), and the msapplication-TileImage meta tag for Windows tiles (modern Edge reads the manifest).

The web manifest for Android and installable sites

Android Chrome, Samsung Internet and desktop Chrome and Edge read icons from the web manifest rather than from link tags. The manifest is a small JSON file; a minimal one looks like this.

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

The 192-pixel icon is used on the home screen and the 512-pixel icon for the splash screen and install prompt. The theme_color tints the Android status bar and the Chrome tab strip; background_color fills the splash screen behind the icon.

The maskable entry deserves attention. Android launchers cut icons into their own shape, which may be a circle, a rounded square or a squircle depending on the phone. A maskable icon must therefore fill the entire canvas with a background colour and keep the logo within a central safe zone: a circle whose diameter is 80 per cent of the icon width. For a 512-pixel icon that is a 410-pixel circle in the middle, which in practice means about 50 pixels of padding on every side. If you supply only a non-maskable icon with a transparent background, Android places it on a white disc with a lot of empty space around it.

Dark-mode favicons

A dark logo on a transparent background disappears against a dark tab bar, and a white one vanishes on a light one. There are three ways to handle this, in increasing order of effort.

The simplest is to give the icon its own background, a filled circle or rounded square in your brand colour, so it has contrast on any tab bar. Most large sites do this. The second is to choose a mid-tone brand colour that reads on both backgrounds; teal, orange and medium blues work, while black, white and pale greys do not.

The third is a responsive SVG. Because an SVG favicon is a document, it can contain a style block with a media query, and Chrome, Firefox and Edge will honour it in the tab. The CSS is a few lines: a rule that sets the fill to the dark colour, then a @media (prefers-color-scheme: dark) block that sets it to the light colour. The raster fallbacks cannot do this, so keep them on a solid background.

Whatever route you choose, check the icon in both themes. A logo that vanishes in dark mode is a surprisingly common problem on otherwise polished sites.

Why your new favicon does not show up

You uploaded a new icon, reloaded, and the old one is still there. This is the single most common favicon complaint, and the cause is that browsers cache favicons separately from pages and far more aggressively. A hard reload refreshes the page but often not the icon. Chrome keeps favicons in its own database keyed by URL, and will happily show a six-month-old icon for a page it has otherwise fetched fresh.

The reliable fix is to change the URL. Rename the files, for example icon-v2.svg, or add a version query to each link tag: href="/icon.svg?v=2". The browser treats this as a new resource and fetches it. For /favicon.ico at the root the name cannot change, so set a sensible Cache-Control header on it (a day or a week rather than a year) and accept that returning visitors will see the old icon until it expires.

Other caches are slower still. Google updates the favicon in search results only when it recrawls the home page, which can take days or weeks; you can request indexing of the home page to hurry it. iOS home-screen icons are copied when the shortcut is created and never updated unless the user removes and re-adds it. Bookmark icons in most browsers update only when the bookmarked page is next visited.

To test without fighting the cache, open the icon URL directly in a private window. If that shows the new file but the tab does not, it is caching, not a broken tag.

Designing something that works at 16 pixels

Most favicon problems are design problems. A full logo with a wordmark becomes an unreadable smudge in a tab. The icon that works is a reduction: one shape, one or two colours, no text beyond a single letter.

• Design at 32 pixels on a 16-pixel grid. Draw at 32 by 32 or larger, but keep checking a 16-pixel preview. If a detail disappears at 16, remove it; it was not pulling its weight.
• Thick strokes only. A 1-pixel line at 32 pixels becomes half a pixel at 16, which renders as a grey blur. Keep strokes at least 2 pixels wide in the 16-pixel version, which means 4 pixels at 32 and 64 at 512.
• Fill the canvas. A tab icon has no border, so a logo that sits in the middle of transparent padding looks tiny. Let the shape touch or nearly touch the edges of the 16-pixel box. The maskable Android icon is the exception; it needs its own padding, which is why it is a separate file.
• Contrast on grey. Tab bars are light grey or dark grey, not white. Check against both, and against the colour of your own theme if the site is installable.
• Use a single letter if the logo will not reduce. A bold initial on a coloured square is instantly recognisable in a row of tabs and is what many well-known sites do.

Start from one clean source: a square PNG or SVG of at least 512 pixels. The Favicon Generator takes that one file and produces the ICO, every PNG size and the link tags, entirely in your browser. If your logo is only available as a JPEG or in the wrong dimensions, the Image Converter and Image Resizer will get it to a 512-pixel square PNG first. If the source is a wider or taller image and only part of it should become the icon, the Image Cropper can cut a 1:1 square from the centre or an edge, or from exact pixel coordinates, before you resize. It only cuts; a wide wordmark squeezed into a square is better reduced to an initial or a symbol first. For checking that your icon colours read against light and dark backgrounds, the Color Picker reports contrast ratios.

A minimal set that covers everything

If you want a checklist rather than a treatise, this is it. Five files at the root, four tags in the head.

1. /favicon.ico containing 16, 32 and 48-pixel images.
2. /icon.svg, simple and small, with an optional dark-mode style block.
3. /apple-touch-icon.png at 180 by 180, opaque, square corners.
4. /icon-192.png and /icon-512.png, plus a maskable 512 with padding.
5. /manifest.webmanifest listing the PNGs with name, colours and display mode.

Then the four link tags in every page head. Check the result in a light and a dark desktop tab, on an iPhone home screen and on an Android home screen.

Where to go next. Build the whole set from one logo with the Favicon Generator, and prepare the source with the Image Resizer if it is not yet a 512-pixel square. Nothing is uploaded; the files are generated in your browser and downloaded straight to your machine.

Frequently asked questions

What size should a favicon be?

Supply several sizes rather than one. A favicon.ico should contain 16, 32 and 48-pixel images for browser tabs and Windows shortcuts. Add a 180 by 180 PNG for iOS home screens, 192 and 512-pixel PNGs for Android via the web manifest, and an SVG that scales to any size in modern browsers. Google search results need a square icon that is a multiple of 48 pixels, which the 48-pixel ICO image covers.

Is ICO or PNG better for a favicon?

Use both. ICO is a container that holds several sizes in one file and is understood by every browser, so it is the right universal fallback at the site root. PNG is required for the iOS touch icon and the Android manifest icons, and gives Google a clean 96-pixel image for search results. Add an SVG as well for sharp tabs on high-density screens and dark-mode support in Chrome, Firefox and Edge.

Why is my favicon not updating after I changed it?

Browsers cache favicons separately from pages and keep them for a long time, so a normal reload often shows the old icon. Change the URL of the icon by renaming the file or adding a version query such as ?v=2 to the link tags, and the browser will fetch the new one. Search engines take days or weeks to recrawl, and iOS home-screen icons only update when the shortcut is removed and re-added.

Do I still need a favicon.ico file?

Yes. Even with SVG and PNG icons linked in the head, browsers request /favicon.ico directly for bookmarks and history, and many feed readers, link-preview services and crawlers fetch that path without reading your HTML. If the file is missing, every one of those requests becomes a 404 in your logs. Keep a small multi-size ICO at the root alongside the modern formats.

What is a maskable icon in the web manifest?

A maskable icon is a PNG that Android launchers can crop into their own shape, such as a circle or rounded square. It must fill the whole canvas with a background colour and keep the logo inside a central safe zone that is 80 per cent of the width, so a 512-pixel icon needs around 50 pixels of padding on each side. Without one, Android shows your icon on a white disc with a large empty border.