logoredraws.com

MDN Documentation on Favicons in HTML: What It Covers and How It Applies to SVG Logo Files

Where MDN covers favicons in HTML, the core link element pattern, and how to prepare vector logo artwork as an SVG favicon with raster fallbacks.

Published

Contents
  1. The short answer
  2. The core HTML pattern
  3. Where SVG favicons fit
  4. Preparing vector logo artwork for use as a favicon
  5. Vector masters and raster deliverables
  6. Permission to use the logo
  7. What this overview cannot confirm

The short answer

MDN Web Docs does not treat the favicon as a separate HTML feature. It documents favicons through the general mechanism browsers use to discover a site icon: a link element placed in the document head, with its rel attribute set to the keyword "icon" and its href pointing to an image file. Favicon-specific details are spread across several reference entries, not collected in one tutorial: the link element itself, the list of rel values (where "icon" and the non-standard "apple-touch-icon" are described), the sizes and type attributes, a glossary definition of the term favicon, and the icons member of the web app manifest.

This overview is based on general, verifiable knowledge of how MDN structures this material. No current page text, compatibility data or revision dates were supplied, so check the live entries for exact wording and up-to-date browser support.

The core HTML pattern

The markup below shows a common combination of the elements MDN documents. It is not quoted from MDN. It includes a scalable SVG icon for browsers that support it, a raster fallback, and a touch icon for Apple devices.

<head>
  <link rel="icon" href="favicon.ico" sizes="any">
  <link rel="icon" href="icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
Attribute | Role in a favicon declaration
rel | Declares the relationship. "icon" is the standard value; "apple-touch-icon" is a widely used non-standard value.
href | Points to the icon file.
type | States the file's MIME type, such as image/svg+xml for SVG, so a browser can skip formats it cannot use.
sizes | Lists the pixel dimensions a raster icon provides. The keyword "any" signals a scalable image.
media | Applies the icon only when a media query matches. Browser support for this on icons varies.

Where SVG favicons fit

An SVG favicon is declared like any other icon, with rel set to "icon" and type set to image/svg+xml. Because the file scales cleanly, one SVG can replace several fixed-size PNGs in browsers that accept it. Support is not universal, so the usual practice is to keep a raster fallback, either an ICO or a PNG. The browser compatibility table on MDN's link element entry is the place to confirm current support. This article does not reproduce that data.

Preparing vector logo artwork for use as a favicon

  • Use a square canvas. Set the SVG viewBox to equal width and height so the browser does not letterbox or distort the mark.
  • Simplify for tiny sizes. A full logo lockup or wordmark is rarely legible in a browser tab. A symbol, monogram or single letter usually works better.
  • Convert text to outlines. An SVG favicon should not depend on fonts, because fonts may be missing when the browser renders the icon.
  • Check for embedded raster images. A file ending in .svg can still wrap a PNG or JPEG inside an image element. Open the file in a code editor or vector editor to confirm the artwork is made of actual paths and shapes.
  • Strip editor metadata, hidden layers and unused definitions to keep the file small and predictable.
  • Consider dark backgrounds. An SVG can include a CSS prefers-color-scheme media query to switch colors. Browsers vary in whether they respect this inside a favicon, so test it before relying on it.

Vector masters and raster deliverables

Of the files a favicon set usually contains, only the SVG can be truly vector. ICO and PNG files, including the Apple touch icon and most manifest icons, are raster exports generated from the vector master. Keep the editable source file, such as the original vector document or a clean SVG with live paths, as the reference. Regenerate every raster size from it instead of scaling one PNG up or down. The web app manifest's icons member, also documented on MDN, accepts several sizes and formats. It is configured separately from the HTML link elements.

MDN explains the technical mechanism, but it says nothing about rights to the artwork. Being able to download a logo file does not mean you may crop, simplify or recolor it into a favicon. It also does not grant rights to any fonts in it or to the trademark it represents. For a logo you do not own, confirm the brand's usage terms before deriving an icon from it.

What this overview cannot confirm

No source material was supplied for this article. That means no exact MDN page text, no browser version numbers, no compatibility percentages and no dates of recent documentation changes. Pixel dimensions for specific platforms are also left out for the same reason. Check current figures and support details against MDN's own reference entries and compatibility tables.