Favicon Supported Formats: Which File Types Work and When to Use Each
A practical guide to favicon formats: ICO, PNG, SVG and others, how they differ, and how to prepare favicon files from a vector logo.
Contents
The short answer
Modern browsers accept several favicon formats. The three that matter in practice are ICO, PNG and SVG. ICO is the legacy format with the broadest backward compatibility. PNG is the dependable raster option for specific pixel sizes and for platform icons such as home-screen shortcuts. SVG is the only vector option, so one file can scale cleanly to any size. Most sites get the most reliable results by combining them instead of picking just one: an SVG for browsers that support it, an ICO or PNG fallback, and PNG files for mobile and installed-app icons.
GIF and JPEG are sometimes accepted, but neither is a sound choice. GIF animation is not reliably displayed in browser tabs. JPEG has no transparency, and its compression produces artifacts at the tiny sizes where favicons are shown.
How the main favicon types differ
| Format | Artwork type | Typical role | Main strengths | Main limitations |
| ICO | Raster container | Legacy and fallback favicon | Broadest compatibility; one file can hold several pixel sizes | Raster only; needs a dedicated export tool |
| PNG | Raster | Fixed-size browser icons, Apple touch icon, web app manifest icons | Universally supported; transparency; predictable rendering | Each size is a separate file; does not scale cleanly |
| SVG | Vector (can also wrap embedded raster images) | Scalable favicon in supporting browsers | One file for every size; small file size; can adapt to dark mode | Support varies by browser and version; still needs raster fallbacks |
| GIF | Raster | Rarely appropriate | Widely recognized | Limited colors; animation not reliably shown |
| JPEG | Raster | Not recommended | Widely recognized | No transparency; compression artifacts at small sizes |
ICO: the compatibility fallback
An ICO file is a container that can store several raster images at different pixel dimensions, letting the browser or operating system pick the closest match. Browsers have long checked for a file named favicon.ico at the site root even without a link tag, which is why many sites still keep one there. ICO adds no visual quality over PNG; its value is compatibility with older software and tools that expect it.
PNG: the dependable raster format
PNG supports transparency and lossless compression, which suits small, flat logo marks. Browsers accept it as a favicon when it is declared with a link tag. PNG is also the expected format for platform icons outside the browser tab: the Apple touch icon used when a page is saved to an iOS home screen, and the icon set listed in a web app manifest for installable web apps. Because each PNG is fixed at one size, you export a separate file for each size you need.
Commonly documented sizes include small tab icons such as 16×16 and 32×32 pixels, 180×180 pixels for the Apple touch icon, and 192×192 and 512×512 pixels for web app manifest icons. Platform guidance changes over time, so confirm current requirements for the platforms you target.
SVG: the vector favicon
An SVG favicon is the closest match to a vector logo workflow. It renders sharply at any size and is often smaller than a set of PNGs. SVG can also include a CSS media query for the user's color-scheme preference, so a single file can switch between light and dark versions of the mark. Browser support for SVG favicons has expanded but is not universal and differs by browser and version. This article does not include current compatibility data, so check an up-to-date compatibility reference before relying on SVG alone, and always provide a raster fallback.
An .svg extension does not guarantee vector artwork. An SVG file can simply wrap an embedded PNG or JPEG, in which case it scales no better than the raster image inside it. Open the file in a vector editor or inspect its code to confirm it contains real paths and shapes before treating it as scalable artwork.
Declaring favicon files in HTML
Favicons are declared with link elements in the page head. The type attribute tells the browser which format each file uses, and the browser chooses among the options it supports. A typical combined setup 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="/site.webmanifest">The manifest file lists the PNG icons used for installed web apps. File names and paths here are illustrative; use whatever matches your site structure.
Preparing favicon files from a vector logo
Whatever format you deliver, start from the master vector logo, not from a raster export. That keeps every output sharp and lets you redraw the mark for small sizes when needed.
- Use a simplified mark, monogram or symbol rather than a full logo with a wordmark; fine detail and small text become unreadable at tab size.
- Place the mark on a square artboard so it is not distorted or letterboxed when scaled.
- Convert live text to outlines in the SVG so rendering does not depend on installed fonts.
- Remove hidden layers, editor metadata and embedded raster images before exporting the SVG.
- Export PNG and ICO files from the vector master at each target size, and check the smallest sizes by eye, adjusting shapes or stroke weights where they blur.
- Test the icons on both light and dark browser themes, especially if the mark relies on a dark or light color.
If you are building a favicon from a logo you did not create, being able to download the file does not mean you may modify it or use it as a site icon. Rights to the artwork, any fonts in it and the trademark itself may each need separate permission from the owner.
Which format to choose
For a new site, the practical default is an SVG favicon generated from clean vector artwork, an ICO or small PNG as a fallback, an Apple touch icon in PNG, and PNG icons listed in a web app manifest if the site can be installed. If you can deliver only one file, an ICO or a small PNG is the safest for broad compatibility, at the cost of scalability. Precise browser-by-browser support and current platform size requirements were not part of the material behind this article and should be verified against a current compatibility reference.