Favicon Sizes in 2026: Which Icon Files a Website Actually Needs

A site needs a small set of icon files in 2026: a favicon.ico (or a PNG) for browser tabs and search results, an apple-touch-icon for the iOS home screen, and 192 × 192 and 512 × 512 PNGs in a web app manifest if you want it installable. Add an SVG icon if you have a vector logo. Everything else in the old 18-size lists is optional.

The favicon generator makes the PNG set, a multi-size .ico, the manifest and the <head> tags from one image, in your browser. Below is what each file is for and where the numbers come from. Specs were checked against MDN, Apple, Google and Next.js documentation on 13 November 2026.

The files and sizes

File	Size	Used for	Source
`favicon.ico`	16, 32, 48 px packed in one file	Tabs, bookmarks, legacy requests	MDN: ICO can hold several sizes and has the best browser support
`icon.png` or `favicon-32x32.png`	32 × 32	Browser tabs on dense screens	Next.js derives `sizes` from the file
`icon.svg`	Any	Vector icon, scales to every size	Next.js accepts `.svg`; MDN: `sizes="any"` is for vector icons
`apple-touch-icon.png`	180 × 180	iOS home screen	Apple's reference markup uses `180x180`
`icon-192.png`, `icon-512.png`	192 and 512	Web app manifest	web.dev: Chromium needs at least these two

Google Search is stricter than the browser tab. Its guidelines say the favicon must be square, at least 8 × 8 px, and recommend larger than 48 × 48. The formats it lists are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on that list, so keep an ICO or PNG even if you also ship an SVG.

The exact `<link>` tags

This is the head block the generator writes, with the manifest and theme colour:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#ffffff" />

Per MDN, sizes takes either any (a scalable vector) or a space-separated list of WxH values that must exist inside the file; sizes and type are hints the browser uses to pick the best icon. The apple-touch-icon line follows Apple's documented syntax. Apple also says that if no size matches the device, Safari uses the smallest icon larger than the recommended size, or the largest one if none is larger.

Steps

Start from one square image. An SVG is best. A PNG should be at least 512 × 512 px, because the 512 manifest icon is drawn from it.
Generate the set. Open the favicon generator, drop the image in (or type two letters to get initials), and check the 16 px preview. Fine detail that reads at 512 px usually disappears at tab size, so simplify the mark.
Download the zip and put the files in your site root, so /favicon.ico and /apple-touch-icon.png resolve.
Paste the tags into your <head>, or use the framework convention below.
Check the manifest. The generated manifest.webmanifest lists the 192 and 512 icons with "type": "image/png", plus display, start_url and the colours.

The generator does not create an SVG icon or a maskable icon. If you want a maskable one, web.dev says to keep the important content inside a circle centred in the icon with a radius of 40% of its width, and to declare it with "purpose": "maskable". It advises against using one icon for both purposes ("any maskable"), because the extra padding shrinks the artwork when it is used as a plain icon.

{
  "src": "/icon-maskable-512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

Next.js: the file conventions

In the App Router you can skip the tags. The Next.js docs define three file names that add the right <link> to <head> automatically:

Convention	File types	Location
`favicon`	`.ico`	`app/` root only
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

Drop favicon.ico, icon.svg and apple-icon.png into app/ and Next.js emits, for the favicon, <link rel="icon" href="/favicon.ico" sizes="any" />. For the others it reads the file's type and size (a 32 × 32 PNG becomes type="image/png" and sizes="32x32") and adds sizes="any" for SVG. apple-icon renders as rel="apple-touch-icon". Add a number suffix (icon1.png, icon2.png) for several icons; they sort lexically.

You can also generate one in code with ImageResponse. You cannot generate a favicon this way; use icon or a real favicon.ico.

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    { ...size }
  )
}

Generated icons are built at build time and cached unless they use request-time APIs. If you also render Open Graph cards, see dynamic OG images in Next.js.

Common mistakes

Only a 16 px favicon. Google recommends a favicon larger than 48 × 48 px for search results. Ship 32 and 48 as well, or a multi-size .ico.
Deleting favicon.ico. MDN says ICO has the best browser support among the multi-size icon formats, so keep it as the fallback.
Changing the favicon URL often. Google says the URL must be stable, and a change can take days to weeks to be recrawled.
Blocking the icon. Googlebot must be able to fetch the home page and the file; a robots.txt rule that blocks it removes the favicon from results.
Pre-rounded corners. Platforms apply their own mask to home-screen icons, so supply a full square.
A Content Security Policy that forgets icons. MDN notes img-src applies to favicons.

More frontend utilities are in the Frontend directory. If you need vector artwork first, SVGOMG optimises an SVG before you use it as icon.svg, and Lucide is a free icon set to start a mark from. For a wider list of sources, see free SVG icon and logo resources. All the free generators live in the toolbox.

FAQ

What size should a favicon be?

Provide 32 × 32 and 48 × 48 PNGs or a favicon.ico that holds 16, 32 and 48 px. Google recommends a favicon larger than 48 × 48 px and requires at least 8 × 8 px.

Do I still need favicon.ico?

Yes, as the fallback. MDN says ICO, which can store several sizes in one file, has better browser support than the alternatives, so use it if cross-browser support is a concern.

What size is the apple-touch-icon?

Apple's reference markup uses 180x180 for the iPhone example, and the generator ships one 180 × 180 PNG. Apple points to its Human Interface Guidelines for current sizes.