What Favicon Sizes Do You Need?

Favicon advice online ranges from "just add favicon.ico" to lists of twenty files in every size anyone ever used. Most of those long lists date from a time when each phone and tablet wanted its own icon. Today a small, well-chosen set covers browser tabs, bookmarks, Google search results, iPhone home screens and installed web apps.

Here's that set, why each file is there, and the exact HTML to put in your page.

The short answer

That's five or six files. Our Favicon Generator creates this set from text, an emoji or your logo: a real multi-size favicon.ico, 16 and 32-pixel PNGs, the 180-pixel Apple touch icon, the 192 and 512-pixel icons and the manifest, in one ZIP file with the HTML to paste.

The HTML to add

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

And in site.webmanifest:

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#2B59FF",
  "background_color": "#FFFFFF",
  "display": "standalone"
}

Leave out the SVG line if you don't have an SVG icon. Everything else works without it.

Why each file is there

favicon.ico: the universal fallback

The ICO format can hold several sizes in one file, so a single favicon.ico with 16, 32 and 48-pixel images lets each browser and Windows pick the sharpest one. Many browsers, feed readers and other tools also request /favicon.ico from the site root on their own, even without a link tag, so keep it there.

Make sure it's a real ICO file. Renaming a PNG to .ico works in some browsers and fails in others.

SVG: optional, for sharpness

An SVG icon stays crisp at any size and zoom level, and can even switch colors for dark mode with a prefers-color-scheme media query inside the SVG. Chrome, Edge and Firefox support SVG favicons, but support elsewhere varies, and Google Search doesn't list SVG among its supported favicon formats. Treat it as an extra on top of the ICO, never a replacement.

When several rel="icon" links are present, MDN explains that the browser uses their type, sizes and media attributes to pick the most appropriate one, and falls back to the next if a format isn't supported. That's why listing the ICO with sizes="32x32" and the SVG with type="image/svg+xml" works well together.

Apple touch icon: 180 × 180

iOS doesn't use rel="icon" for home screen icons. MDN notes that Apple "uses the non-standard apple-touch-icon" instead. Apple's own Safari web content guide shows 180 × 180 for high-resolution iPhones, and when there's no exact match, iOS uses "the smallest icon larger than the recommended size," so one 180-pixel file covers iPhones and iPads.

Use a full square with a solid background. iOS rounds the corners itself, and a home screen icon isn't the place for transparency. If you don't add the link tag, iOS looks in the site root for files named apple-touch-icon…, so the conventional file name helps even without the tag.

192 and 512 PNGs in a manifest

Android and installable web apps take icons from the web app manifest. According to web.dev, "For Chromium, you must provide at least a 192x192 pixel icon and a 512x512 pixel icon," and Chrome scales those two for other screens. MDN's manifest icons reference covers the other options.

Android can display icons in different shapes. A maskable icon has extra padding so the platform can crop it to a circle or rounded square without cutting off your logo. To provide one, add "purpose": "maskable" to an icon that keeps the important part within the center of the image.

Favicons in Google search results

Google shows your favicon next to your site in search results, and its favicon guidelines add a few requirements:

• "Your favicon must be a square (1:1 aspect ratio) that's at least 8x8px," and Google recommends one "larger than 48x48px so that it looks good on various surfaces." The 48-pixel image in your ICO or the 180-pixel touch icon both qualify.
• Supported formats include ICO, PNG, GIF, JPEG and a few others.
• "Googlebot-Image must be able to crawl the favicon file," so don't block it in robots.txt. (Our article on robots.txt vs noindex explains what blocking does.)
• Google uses one favicon per hostname. blog.example.com can have its own; example.com/blog can't.
• Keep the URL stable. After a change, Google says updating can take several days to several weeks.

Design tips for tiny icons

• Simplify. At 16 pixels, a full logo with a wordmark becomes a smudge. Use a single letter, a symbol, or the most recognizable part of your logo.
• Use strong contrast. Tabs can be light or dark. A colored background shape keeps the icon visible on both.
• Check it at real size. A design that looks great at 512 pixels can be unreadable at 16. The Favicon Generator previews the icon in a mock browser tab and at each size side by side.
• Leave padding for the Apple and maskable icons, so corner rounding and cropping don't clip the edges.

Troubleshooting

The old favicon still shows

Browsers cache favicons aggressively, sometimes separately from the page. Check in a private window first. If you replaced the file under the same name, add a version to the URL, such as /favicon.ico?v=2, so browsers fetch it again.

The favicon doesn't appear at all

Open the icon URL directly in your browser. If it doesn't load, check the path: the generated HTML usually assumes files in the site root. Our HTTP Headers Viewer shows whether the server returns a 200 status and an image content type such as image/x-icon or image/png, rather than an HTML error page.

The home screen icon is a screenshot or a generic letter

That's iOS falling back when it can't find an Apple touch icon. Add the 180-pixel PNG and the apple-touch-icon link tag.

FAQ

Is a favicon the same as an Open Graph image?

No. The favicon is a small square icon for tabs and bookmarks. The Open Graph image is a large, wide picture for link previews in social apps. See Link Preview Not Showing? for the latter.

Do I still need favicon.ico?

Yes. It's tiny, it's what many tools request by default, and it covers older browsers.

Can I use a JPG?

It works in many places, but JPG has no transparency and can blur small details. PNG and ICO are better for icons.

What about 96 × 96, 152 × 152 and the other sizes I see listed?

They come from older devices and platforms. Browsers and iOS scale from the nearest larger icon, so the set above covers current devices.

• #Apple touch icon
• #Favicon
• #HTML
• #Web app manifest