The Correct MIME Type for a Favicon

The short answer

A favicon has no single correct MIME type. The right type depends on the file format of the icon. A classic .ico file is registered as image/vnd.microsoft.icon, and image/x-icon is the older unofficial label that browsers and servers still widely recognize. A PNG favicon uses image/png. An SVG favicon uses image/svg+xml. What matters most is that the server sends a Content-Type header that matches the file it actually delivers.

Common favicon formats and their MIME types

Format | MIME type | Vector or raster | Practical note

ICO | image/vnd.microsoft.icon (image/x-icon is the widely used legacy alternative) | Raster container | Can hold several bitmap sizes in one file; the most broadly recognized fallback

PNG | image/png | Raster | Common for single-size icons and touch icons on mobile home screens

SVG | image/svg+xml | Vector, unless it wraps an embedded bitmap | Scales to any size from one file; browser support is not universal, so keep a raster fallback

GIF | image/gif | Raster | Works in some browsers but is rarely the best choice today

Web app manifest (lists icons, not an icon itself) | application/manifest+json | Not applicable | Points to PNG or SVG icons used when a site is installed as an app

The server header outweighs the HTML type attribute

The type attribute on a link element is only a hint. Browsers use it to decide whether to fetch an icon at all, and may skip a declared type they do not support. Once the file is downloaded, the server's Content-Type header is what tells the browser how to interpret it. If the header and the file disagree, an icon can fail to appear, especially SVG icons, which browsers treat more strictly than bitmaps. If a favicon is missing despite correct markup, inspect the response header first.

Some servers are not configured to send image/svg+xml for .svg files or the ICO type for .ico files. Adding the mapping explicitly avoids that problem. Typical configuration lines look like this:

# Apache (.htaccess or server config)
AddType image/vnd.microsoft.icon .ico
AddType image/svg+xml .svg
AddType application/manifest+json .webmanifest

# nginx (inside a types block)
types {
    image/vnd.microsoft.icon  ico;
    image/svg+xml             svg;
    application/manifest+json webmanifest;
}

A typical declaration with a fallback

Because no single format covers every browser and device, many sites declare an SVG icon for browsers that support it alongside an ICO or PNG fallback. The placeholders below stand in for your own file paths.

<link rel="icon" href="PATH_TO_FAVICON.ico" sizes="any">
<link rel="icon" href="PATH_TO_ICON.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="PATH_TO_TOUCH_ICON.png">

What the MIME type does and does not tell you about the artwork

Serving a file as image/svg+xml only says the file is SVG markup. It does not guarantee clean vector paths. An SVG can wrap an embedded PNG or JPEG, which behaves like any other bitmap and blurs when scaled. Before relying on an SVG as a scalable favicon, open it in a vector editor or read its markup and confirm the logo is built from paths and shapes rather than a placed image. Likewise, an ICO or PNG favicon is always raster, even if it was exported from a vector master.

Why pixel-grid refinement still matters for vector favicons

A vector logo that looks crisp at full size can turn muddy at the very small sizes browser tabs use, because thin strokes and fine detail fall between pixels. Choosing SVG does not remove that problem; the browser still rasterizes the vector at tab size. For small raster sizes such as 16 and 32 pixels, designers often simplify the mark, thicken strokes and align edges to whole pixels before export. A simplified, grid-aligned version of the logo usually reads better as a favicon than the full logo shrunk down, whichever MIME type delivers it.

Rights to the logo are a separate question

Converting a logo into a favicon means modifying and reproducing the artwork. Being able to download a logo file does not by itself grant permission to alter it, use its fonts or display the trademark. For your own brand this is rarely an issue; for a client or third-party mark, confirm usage rights before producing derivative icons.

Gaps in this assessment

No source-specific evidence was supplied for this topic, so this article relies on general, verifiable web standards practice. It does not state which browser versions support SVG or other favicon formats, because no confirmed support data was provided. Check current browser compatibility documentation before dropping a raster fallback.