How to Make a Favicon: The Sizes That Matter and the HTML You Need

Three files cover nearly every case: a favicon.ico containing 16, 32 and 48 pixel versions, an SVG for browsers that can use it, and a 180 by 180 PNG for Apple devices. Add a web app manifest with 192 and 512 pixel PNGs only if people can install your site as an app. The long lists of 20 or more sizes you may see in old tutorials date from years when browsers, Windows tiles and old iOS versions all wanted something different.

Here is the HTML:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Put those in the <head> of every page, with the files in your site root. Add this line as well if you have a manifest:

<link rel="manifest" href="/site.webmanifest">

What each file is for

A note on the sizes attribute: it describes the ICO’s largest image, and setting a specific value there, rather than any, avoids a Chromium quirk where it chooses the ICO over your SVG. This is documented by Evil Martians in a widely used guide.

The Apple size comes from Apple’s web documentation, which lists 180 by 180 for retina iPhones. A single 180 pixel file is scaled down for other devices. Give it a solid background: iOS fills transparency with black and adds its own rounded corners, so do not round them yourself.

What Google Search wants

Your favicon can appear beside your site in search results, so this one is worth getting right. Google’s guidelines as updated in October 2026 ask for:

• A square image of at least 8 by 8 pixels. Google recommends larger than 48 by 48, so it looks good on different surfaces.
• A supported format. The list is BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on that list, which is the best reason not to rely on an SVG alone.
• A <link> tag in your home page’s <head> with a rel of icon, apple-touch-icon or similar.
• Permission to crawl. Both the home page and the icon file need to be open to Googlebot, so check robots.txt.
• A stable URL. Do not rename it with every build.
• One favicon per hostname. A subfolder cannot have its own.

Updates can take days to weeks to appear. The 180 pixel Apple icon above satisfies the larger-than-48 recommendation, and it is in a supported format.

SVG favicons

An SVG favicon stays sharp at any size and can be tiny. The one we tested, a circle with a tick mark, was 233 bytes. Its PNG versions ranged from 499 bytes at 16 pixels to 16 KB at 512. It can also do something no bitmap can, which is respond to dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    circle { fill: #1f4f8f; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #8fb8f0; }
    }
  </style>
  <circle cx="32" cy="32" r="28"/>
</svg>

Support is now wide but recent. According to caniuse, Chrome and Edge have supported them since version 80, Firefox has had full support since version 41, and Safari joined in version 26.0. On older Safari versions, and on any software without support, your ICO is the fallback, which is why you keep both.

Chromium browsers treat SVG favicons in a restricted mode and require the file to be served as image/svg+xml. If your SVG does not show, check the content type.

Designing something that survives 16 pixels

A favicon is a very small target. Most problems are design ones, not technical ones.

• Simplify. A full logo with a wordmark becomes a smear at 16 pixels. Use a single letter or symbol, and let it fill the square.
• Use strong contrast. Thin lines and pale colours vanish. Remember that the tab bar may be light or dark.
• Check it at real size. Preview it in a browser tab next to other sites’ icons, not zoomed in on a design canvas.
• Mind transparency. A dark logo with a transparent background can disappear on a dark tab bar. Either add a coloured shape behind it or use the dark mode technique above.
• Hand-tune if needed. At 16 pixels, automatic scaling can blur edges. A designer will often redraw the 16 pixel version by hand, and for a brand you care about that is worthwhile.

How to make the files

With our tools

Favicon Generator takes a PNG, SVG, JPG or WebP, and builds the set in your browser, along with the HTML to paste. Start from an SVG or a square PNG of at least 512 pixels, since scaling a small image up looks blurry. If you only need the ICO, PNG to ICO packs the sizes you choose into one file. And SVG to PNG gives you exact pixel sizes from a vector.

Inside an ICO file, and with code

An ICO file is a small container, with a header listing each size, followed by the images themselves. Modern ICO files can hold PNG data directly. This is how file described an icon we built with 16, 32 and 48 pixel images, 3,953 bytes in total:

MS Windows icon resource - 3 icons, 16x16 with PNG image data, ...

If you work with Python, Pillow can also write one. From our 512 pixel test logo, this made a 4,979 byte file holding the three sizes:

from PIL import Image

Image.open("icon-512.png").save("favicon.ico", sizes=[(16, 16), (32, 32), (48, 48)])

The manifest, if you need one

Only add this if your site should be installable as an app. Otherwise, you can skip the manifest and its two PNGs without any harm. A minimal site.webmanifest:

{
  "name": "My Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Why your new favicon does not show up

Favicons are cached aggressively, so this catches nearly everyone.

1. Open the icon’s URL directly, for example yoursite.com/favicon.ico. If you get a 404, the problem is the file’s location.
2. Try a private window or another browser. Your usual browser may be holding on to the old one.
3. Check the content type. An SVG served as text/plain will be ignored.
4. Look for an old <link> tag left behind by your theme or CMS. It may be pointing somewhere else, and many platforms have their own favicon setting that overrides what you add.
5. For Google Search, give it time, then use the URL Inspection tool in Search Console to request a recrawl of your home page.