Favicon Examples on W3Schools: How the Link Tag Works and How to Prepare the Icon

The favicon examples in W3Schools-style HTML tutorials come down to one line of markup: a link element with rel="icon", placed inside the page's head and pointing to an image file. The rest of the work is about that file: which format it uses, whether it holds true vector shapes, and whether the symbol is still readable at browser-tab size. The snippets below show the standard HTML pattern these tutorials teach. They are not copied from any specific page.

The basic connection pattern

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  ...
</body>
</html>

The rel attribute tells the browser that the linked file is the page's icon. The type attribute declares the file format. The href attribute gives the file's location, which is resolved relative to the page unless a full path is given. The element belongs in the head, not the body. If no icon link is declared, many browsers still try to request a file named favicon.ico from the site's root. Declaring the link explicitly is more predictable.

Format variants and what each file holds

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

Format | What the file contains | Practical note

ICO | A container for one or more raster images | Long-standing format, commonly kept as a fallback

PNG | A single raster image | Simple to produce; detail can blur when the browser rescales it

SVG | XML markup that may hold vector shapes or an embedded raster image | Scales cleanly only when it truly contains vector shapes; support varies, so pair it with a raster fallback

Browser support for these formats differs, especially for SVG icons. Check current compatibility data for the browsers your audience uses rather than assuming any one format works everywhere. A common, low-risk approach is an SVG icon plus an ICO or PNG fallback.

Vector artwork vs. an image inside an SVG

A file ending in .svg does not prove that it contains editable vector paths. An SVG can wrap an embedded bitmap, so it behaves like a raster image with a vector extension. A logo preview shown on a download page may also be a raster rendering of the artwork rather than the artwork itself. To check, open the file in a vector editor or a text viewer. Path and shape elements indicate real vector geometry. An image element carrying embedded data indicates a raster image inside the SVG. Only genuine vector geometry gives the crisp scaling that makes an SVG favicon worth using.

Selecting the symbol for favicon size

Favicons are shown far smaller than a logo is usually designed for, so the full lockup rarely survives intact. This is especially true of wordmarks and taglines. The following are editorial design guidelines, not measured rules:

• Use the most distinctive single element of the logo, such as an emblem, monogram or simplified mark.
• Remove fine details, thin strokes and small text that will disappear at tab size.
• Keep strong contrast between the symbol and its background.
• Check legibility against both light and dark browser themes.
• Preview the result at actual display size in a browser tab, not only zoomed in inside an editor.
• Keep the simplified favicon as its own vector master so raster exports can be regenerated cleanly.

Permissions when using someone else's logo

Being able to download a logo file is not the same as having permission to modify it, crop it into a favicon, reuse its fonts or display the trademark. When you prepare a favicon from a client's or third party's logo, confirm the usage rights for the artwork, any typefaces in it and the mark itself. Icons shown in tutorial examples are there to demonstrate the code and should not be reused as your own site's icon.

What this overview does not confirm

No verified evidence was available for this article about the current wording, code samples or support tables on W3Schools pages. Exact browser compatibility details and recommended pixel dimensions are also not covered here. Check those points against the live tutorial and current browser documentation before relying on them.