logoredraws.com

W3C Guidance on Website Favicons

What W3C and HTML standards say about favicons: how icons are declared, how sizes and SVG fit in, and what that means when preparing a favicon from vector logo artwork.

Published

Contents
  1. The short answer
  2. What the standards actually define
  3. How this connects to vector logo artwork
  4. Permission to use a logo as a favicon
  5. Gaps in the available guidance

The short answer

There is no single W3C rulebook for favicon design. The guidance comes from web standards that define how a site declares its icons, and it is technical rather than visual. The HTML standard defines the icon link type, which lets a page point to one or more icon files and describe them by size and media type. The Web App Manifest specification, published through the W3C, defines a separate list of icons that installed web apps use. Neither document tells you which symbol to choose, how to simplify a logo, or which colours to use. Those are design decisions, and they sit outside the standards.

What the standards actually define

In HTML, a favicon is declared with a link element whose rel value is icon. Several such links can appear on one page, and the browser chooses the one that best suits its context. The standard still accepts the older two-word form, shortcut icon, for historical compatibility, but icon alone is the current form.

  • sizes: states the pixel dimensions an icon file contains, written as width x height, or the keyword any for a scalable format such as SVG.
  • type: gives the file's media type so a browser can skip formats it cannot use without downloading them.
  • media: allows an icon to apply only under certain conditions, such as a particular colour scheme, where browsers support it.
  • Fallback: when a page declares no icon, the HTML standard allows browsers to request a file named favicon.ico from the root of the site. This is permitted behaviour, not a requirement, so relying on it alone is less dependable than declaring icons explicitly.

An older W3C quality-assurance tip on adding a favicon also recommended declaring the icon with a link element rather than relying only on the root file. That tip predates SVG favicons and the Web App Manifest, so treat it as background rather than a current specification.

<link rel="icon" href="[path-to-icon.ico]" sizes="[width]x[height]">
<link rel="icon" href="[path-to-icon.svg]" type="image/svg+xml" sizes="any">

The Web App Manifest handles a different job. Its icons member lists image files with source, sizes, type and an optional purpose value. The purpose value can mark an icon as maskable, meaning the platform may crop it into a shape, or as monochrome. Browser-tab favicons and installed-app icons can therefore come from different files, and a mark that works at tab size may need a separate, padded version for maskable use.

How this connects to vector logo artwork

Because the standards accept SVG with a sizes value of any, a vector logo can in principle serve as a scalable favicon. In practice the full logo is rarely the right source. A wordmark or a detailed lockup becomes illegible at small tab sizes, so the usual choice is the simplest distinctive element, such as a symbol, monogram or single letterform. This is an editorial judgment, not a standards requirement.

  • Check the file content, not the extension. An SVG can wrap an embedded raster image, which will not scale cleanly. Do not assume a file has editable vector paths because of its name or extension.
  • Separate source artwork from previews. A PNG or JPG preview of a logo is not vector artwork, even when it accompanies a vector file.
  • Keep raster fallbacks. Not every browser or platform uses SVG favicons, so an ICO or PNG version is still commonly supplied alongside the SVG.
  • Simplify at the vector stage. Removing fine strokes, small text and thin gaps in the source artwork usually gives better results than relying on the browser to scale down a complex file.

Permission to use a logo as a favicon

Being able to download a logo file does not grant the right to modify it, crop it into a favicon, or use its typefaces and trademarks. Creating a favicon from someone else's logo is a modification and use of their brand, so it needs the owner's permission or brand guidelines that cover it. For your own brand, check that any fonts in the source artwork are licensed for the way the derived icon will be used.

Gaps in the available guidance

No confirmed source evidence was available here for specific recommended icon dimensions, browser support tables or dates. The standards also do not prescribe a required set of sizes. Exact support for SVG favicons, the media attribute on icon links and maskable manifest icons varies by browser and platform. Check current browser documentation before settling on a final file set.