Favicon sizes and file types: ICO, PNG and SVG

You need one simple square image, saved in one or two formats. An SVG plus an ICO file covers most cases. Add a PNG if you want a phone home screen icon.

What to have ready

• Your logo or a simplified version of it, as a square.
• A way to export SVG, PNG and ICO. Most image editors do, and free online converters exist. Use ones you trust.
• A plain background. Fine detail disappears at tab size.

The three formats

Vector means the image is described by shapes and lines instead of pixels, so it can scale up or down without going blurry. SVG is a vector format.

Old Internet Explorer is the catch. It doesn't support SVG favicons². If you still want those visitors covered, keep an ICO file too.

Sizes

An ICO file can hold more than one size. Icon files can be 16×16, 32×32, 48×48 or 64×64 pixels². A pixel is one tiny dot of the picture, so 16×16 means 16 dots across and 16 down.

Google's rules for search results are looser. The favicon must be square, at least 8x8 pixels³. Google recommends going larger than 48x48 pixels so it looks good on different surfaces³. There's more on this in the Google search page.

A common plan for a simple site:

1. Draw the icon as a square at a large size, so you keep a clean master copy.
2. Export an SVG if your editor allows it.
3. Export an ICO that holds the smaller sizes from the list above.
4. Keep the master file somewhere safe so you can redo the icons later.

Which file types Google reads

For search results, Google Search supports BMP, GIF, ICO, PNG, JPEG, PPM and TIFF³. SVG isn't on that list. That's a good reason to keep an ICO or PNG alongside an SVG, if search results matter to you.

Phone home screens

Apple's guidance for a home screen icon on iOS is a PNG file called apple-touch-icon.png in the root document folder⁴. It's a separate file with its own rules. Read about it under home screen icons.

Keep the picture simple

At tab size, an icon is a few dots wide. A thin line or a small word turns into a smudge. One bold shape or a single letter on a plain colour is usually easier to read than a full logo with a tagline.

Try this before you export. Shrink your drawing on screen until it's about the size of a postage stamp, then squint. If you can still tell what it is, the shape is probably simple enough. If not, strip something out.

Also think about the colour behind it. Browser tabs can be light or dark. An icon with a transparent background can look odd on one of them, so a solid background square is one option. SVG favicons can even adjust their colours for light and dark mode², but that's a job for a later page.

Putting it together

The code that points to these files is in the tag walkthrough.