Favicon size and format: which files you actually need

The short answer

Start from one square image, ideally 512 by 512 pixels or larger, and export these:

• favicon.ico (16, 32 and 48 pixel versions inside one file)Tabs, bookmarks, older browsers
• 32×32 PNGSharp tab icon on high-density screens
• 180×180 PNG, named apple-touch-icon.pngiPhone home screen
• 192×192 and 512×512 PNGWeb app manifest, Android and install prompts

The favicon generator produces exactly this set from one image, plus the HTML to paste, so you do not have to resize anything by hand.

What Google asks for in search results

Google shows your favicon next to your listing in search. Its documentation says the icon must be square (1:1) and at least 8×8 pixels, and recommends one larger than 48×48. It accepts several formats, including ICO, PNG and JPEG, and wants the link in the head of your home page:

<link rel="icon" href="/favicon.ico" sizes="any">

Three practical rules from the same page. Google supports one favicon per hostname, not one per section of the site. Both your home page and the icon file must be crawlable, so do not block them in robots.txt. And keep the file at a stable address: Google says it can take several days to several weeks to pick up a change, and you can ask for a recrawl of the home page with the URL Inspection tool in Search Console.

What phones and installed apps ask for

• Chrome and other Chromium browsers. To make a site installable, web.dev says the manifest must provide at least a 192×192 and a 512×512 icon. If you provide only those two, the browser scales them to fit the device.
• Maskable icons. Android can crop icons into a circle, a square with rounded corners or other shapes. An icon marked "purpose": "maskable" is designed with a safe zone in the middle so the shape can cut the edges without cutting the logo. If your artwork fills the whole square, make a separate maskable version with padding.
• iPhone and iPad. Safari uses the apple-touch-icon link when someone adds your site to the home screen. Apple's own example markup uses 180×180 for iPhone retina screens, and if no link is present it looks for a file named apple-touch-icon.png in the root folder.

Why the .ico file still exists

An .ico file is a container that holds several sizes in one file, usually 16, 32 and 48 pixels. It is the oldest favicon format, and some tools and crawlers still request /favicon.ico by that exact name even when your page points elsewhere. Keeping one costs a few kilobytes, so it is worth having even if every modern browser would be happy with the PNG.

An SVG favicon is a good extra if your logo is a simple shape, because it stays sharp at any size. Treat it as an addition to the PNG and ICO files, not a replacement, since not every place that shows an icon can use it.

Mistakes that make a favicon look bad

1. Starting from a small or detailed image. At 16 pixels, thin lines and small text turn to mush. Use a bold, simple shape with high contrast, and check the 16 pixel version before you ship.
2. A non-square image. It gets stretched or padded. Crop to a square first.
3. Resizing in one big jump. Shrinking 512 pixels straight to 16 can go noisy. Scaling down in steps gives a cleaner small icon, which is how ArdoIcon does it.
4. Forgetting the tag. Files in the root folder do nothing for some browsers until a link tag in the head points to them.
5. Expecting instant change. Browsers cache favicons hard. After you replace one, hard-refresh, or test in a private window.