🎓 A1Learner
🔍
0 of 50 lessons completed

HTML Favicon

A favicon is the small picture a browser shows on a page tab. A link element in the head of the page sets the favicon.

The icon link

The rel value icon marks this link as the favicon. This href value is a data URI that carries a tiny blue circle.

<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%277%27 fill=%27blue%27/%3E%3C/svg%3E">

A file as the icon

A real site usually points href at an icon file. The file sits on the site server with the pages.

<link rel="icon" href="favicon.ico">

The link sits in the head

The favicon link belongs in the head, next to the title. The head holds facts about the page, not page content.

<head>
<title>Icon Demo</title>
<link rel="icon" href="favicon.ico">
</head>

Example

<!DOCTYPE html>
<html>
<head>
<title>Icon Demo</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%277%27 fill=%27blue%27/%3E%3C/svg%3E">
</head>
<body>
<h1>Icon Demo</h1>
<p>The tab for this page shows a blue circle.</p>
</body>
</html>

Key points

  • Favicon: the small picture shown on a browser tab
  • link element: an empty element that connects a page to a resource
  • Resource: a file the page uses, like a picture
  • rel attribute: names the kind of connection a link element makes
  • Use the rel value icon to mark a link as the favicon
  • Use href to name the icon picture
  • A favicon link in the head gives the page tab its picture.

In this example, the head holds the title and the favicon link. The link has the rel value icon. Its href value is a data URI for a tiny blue circle. The body holds the visible heading and paragraph. A real site points href at an icon file instead.

Note

The link element has no closing tag.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Where does the favicon link go?