×

html · level 3 · unit 3 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

<link rel="icon"> gives your site a .

A favicon is the little picture beside the page's name on a browser tab, next to a and in search results. Without one, the browser shows a plain grey globe, and your tab gets lost among the others.

Add <link rel="icon" href="logo.svg" type="image/svg+xml"> to the head. type says what kind of file it is. An SVG drawing stays sharp at every size, so one file does the job.

Favicons are often shown only 16 pixels wide, so keep the drawing bold and simple. A detailed logo turns into a smudge.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pip's Plants</title>
    <link rel="icon" href="logo.svg" type="image/svg+xml">
  </head>
  <body>
    <h1>Pip's Plants</h1>
  </body>
</html>

Press show my page to see it here.

image/svg+xml is the official name for SVG files. A browser that cannot use an SVG icon skips it.