Favicon Sizes: What Size Should a Favicon Be in 2026?

A favicon is a small square image that represents your website in browser tabs, bookmarks and Google Search results. The favicon size that covers almost every browser and device is a 32 × 32 px favicon.ico, an SVG, a 180 × 180 px Apple touch icon and 192 × 192 and 512 × 512 px PNGs for Android. Google Search only asks for a square image of at least 8 × 8 px, and recommends more than 48 × 48 px.

This guide lists every favicon size and where it is used, the minimal set of files to publish, the HTML to paste, how to design a favicon that survives 16 px, and what to do when it doesn't show.

What size should a favicon be?

A favicon should be square, drawn on at least a 32 × 32 px canvas, and supplied in a few larger sizes for phones and search. Browsers show the tab icon at 16 px, or at 32 px on high-density screens, so the file you supply needs to be sharp at 32 px and still readable at 16.

These sizes match the web section of our app icon sizes guide, which also covers iOS, Android and other platforms.

What is the Google Search favicon size?

Google Search shows your favicon next to your result, and asks for a square favicon that is at least 8 × 8 px, ideally larger than 48 × 48 px. According to Google's favicon guidelines, Google supports BMP, GIF, ICO, PNG, JPEG, PPM and TIFF files, and does not list SVG, so an SVG-only site should also publish an ICO or PNG.

Three more rules from the same page are easy to miss:

• One favicon per hostname. https://www.example.com/ and https://blog.example.com/ can have different favicons, but a subdirectory such as /blog/ cannot.
• Put the tag on your home page. Google reads the <link> tag from the home page, and Googlebot and Googlebot-Image must be allowed to crawl the home page and the favicon file.
• Keep the URL stable. Changing the favicon's URL often makes Google start over, and it can take several days to several weeks for a new favicon to appear.

The minimal favicon set: five images and one file

You don't need the 20 or more files that many generators produce. Evil Martians' widely cited guide, How to Favicon, recommends five images and one JSON file, which they describe as the smallest set that works in all popular browsers:

• favicon.ico: a single 32 × 32 px image, for older browsers and for anything that requests /favicon.ico.
• icon.svg: for modern browsers, sharp at any size.
• apple-touch-icon.png: 180 × 180 px, for iPhones and iPads.
• icon-192.png and icon-512.png, plus a maskable 512 px PNG, listed in the web app manifest.

The HTML for the browser looks like this:

<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="/manifest.webmanifest" />

The manifest lists the two Android icons, and the maskable one with "purpose": "maskable". A maskable icon needs extra padding, because Android crops it to the shape of the launcher: keep the art inside a central circle that is 80% as wide as the image, which is 409 px on a 512 px icon.

If you'd rather not build these by hand, our free favicon converter makes the whole set from one image, including a favicon.ico with 16, 32 and 48 px versions, PNG favicons, the Apple touch icon, Android and maskable icons, a site.webmanifest and the tags to paste. It works in your browser, so the image is not uploaded.

ICO, PNG or SVG: which favicon format?

Which favicon format to use depends on where the icon appears: ICO for compatibility, SVG for sharpness and dark mode, PNG for phones and Google.

If you have a PNG logo, the PNG to ICO converter builds a multi-size .ico. If you have a vector logo, the SVG to ICO converter draws each size from the SVG so the small ones stay sharp.

How to design a favicon that works at 16 px

A favicon works at 16 px when it is one bold shape in one or two colours, with no text and no fine detail. A 16 × 16 px favicon has 256 pixels: your whole logo has to be drawn with those.

In AI Icon Creator's example, the same piggy bank was made in a glossy 3D style and a flat style, then shrunk to 16 and 32 px. The flat version keeps its ears, snout and coin. The glossy one loses its highlights and turns into a blue smudge. Four habits help:

1. Use one shape. Your whole logo rarely fits; use its most recognisable part, such as an initial or a symbol.
2. Make lines bold. A line that is 1 px wide at 32 px is only half a pixel at 16. Our guide to keeping an icon legible at small sizes has the arithmetic.
3. Add a background. A transparent favicon in dark strokes disappears on a dark tab bar. A solid or coloured background works in both, and an SVG can switch colours with a prefers-color-scheme rule.
4. Test at real size. Look at the icon in a real browser tab, on light and dark themes, not zoomed in.

If you don't have a logo yet, generate a simple, bold symbol and use that. A flat style works best for favicons:

How to add a favicon to your website

To add a favicon, export the files, upload them to the root of your site, and paste the <link> tags into the <head> of your home page. It takes about ten minutes.

1. Start from a square master, at least 512 × 512 px, or an SVG. Keep it simple, as above.
2. Export the set from a favicon converter or your design tool.
3. Upload the files to your site root, so that /favicon.ico loads. Most website builders have a favicon or site icon field in their settings; use it instead of editing the HTML.
4. Paste the tags into the <head> of your home page.
5. Check the tab. Hard-refresh the page, or open it in a private window, because browsers cache favicons aggressively.

Why is my favicon not showing?

A favicon usually doesn't show because the browser has cached the old one, the file isn't where the tag says, or Google hasn't recrawled your home page yet. Work through these in order:

• Open the file directly. Visit yoursite.com/favicon.ico. If it doesn't load, the file is in the wrong place.
• Clear the cache. Try a private window, or another browser. To force an update, give the file a new name or a version in its URL.
• Check the tag. It must be in the <head> of your home page, with the right href.
• Check robots.txt. Googlebot and Googlebot-Image must be allowed to fetch the home page and the icon.
• Wait for Google. Search results can take days to weeks to update. Requesting indexing of your home page in Search Console can speed it up.

Frequently asked questions

Is a favicon 16x16 or 32x32?

A favicon is drawn at 16 × 16 px in a browser tab, but you should supply at least 32 × 32 px, because high-density screens use the larger image and downscale it for standard screens. Design the icon so that it still reads at 16 px, since that's the size most people see.

What size should a favicon be in 2026?

A favicon in 2026 should be a 32 × 32 px favicon.ico, an SVG, a 180 × 180 px Apple touch icon and 192 × 192 and 512 × 512 px PNGs for Android. That five-image set is enough for current browsers, and Google Search needs only a square image of at least 8 × 8 px, ideally over 48 × 48 px.

What's the difference between .ico and .png favicons?

An .ico file can hold several sizes in one file and is the format every browser requests at /favicon.ico, while a .png holds a single size. Use ICO for broad compatibility, PNG for phone and manifest icons, and SVG for sharp scaling and dark mode.

Do I need all the sizes that favicon generators produce?

You don't need all the sizes that favicon generators produce. Browsers pick the closest size and scale it, so a small set of a 32 px ICO, an SVG, a 180 px Apple touch icon and 192 and 512 px PNGs covers current browsers and devices. Extra sizes only matter for old or unusual platforms.

Can I make a favicon from my app icon?

You can make a favicon from your app icon, and it helps people connect your site and your app. Use the icon's most recognisable shape, without any small details, on a solid background. Our guide on how to make an app icon covers making the master, and the favicon converter turns it into every size.

Try a symbol for your own site: