Favicon file formats: ICO vs PNG vs SVG

Favicons come in three main formats. Each has a job, and a complete favicon set uses all of them.

ICO format

ICO is the Windows icon format and the original favicon format. One .ico file holds several square images, for example 16×16, 32×32 and 48×48, and the browser picks the best size.

Use it for: /favicon.ico in your site’s root folder
Why: every browser supports it, and browsers, feed readers and many tools request /favicon.ico automatically, even without HTML
Limit: 256×256 at most

Modern ICO files store each image as PNG inside, so they keep full transparency. Make one with the ICO generator.

PNG format

PNG is the standard format for the other favicon sizes:

favicon-16x16.png and favicon-32x32.png for browser tabs
apple-touch-icon.png (180×180) for iPhone and iPad
android-chrome-192x192.png and android-chrome-512x512.png for Android

PNG supports transparency and is linked with <link rel="icon" type="image/png">.

SVG format

An SVG favicon is a vector image, so it is sharp at every size and usually very small. It can even switch colours for dark mode with a CSS media query inside the file.

Chrome, Edge, Firefox and current Safari support SVG favicons, but some older browsers and tools don’t, so keep favicon.ico as a fallback. Convert your logo with SVG to favicon.

What about JPG, GIF and WebP?

JPG has no transparency and blurs sharp edges. Avoid it for favicons.
GIF works, and some browsers once animated it, but most don’t today.
WebP isn’t widely supported for favicons yet.

Which format should you use?

Use all three:

File	Format
favicon.ico	ICO (16, 32, 48)
favicon.svg	SVG (optional, recommended)
Tab, Apple and Android icons	PNG

The favicon generator creates the ICO and PNG files together, and adds favicon.svg when you start from an SVG.