Favicons & Intro to Social Metadata

Two additions to <head> make a site feel significantly more professional: a favicon (the small icon in the browser tab) and Open Graph metadata (which controls how the page looks when shared on social media or in messaging apps).

Favicons

A favicon is the small icon that appears in:

The browser tab, next to the page title
Bookmarks and the browser’s history list
Pinned tabs and home screen shortcuts on mobile

Without a favicon, the browser shows a generic globe or blank icon. With one, the site has a visual identity that users can recognize at a glance.

Linking a favicon

The favicon is declared in <head> using a <link> element:

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

rel="icon" tells the browser this link is a favicon
href points to the favicon file (usually in the root of the site folder)
type tells the browser the file format

Favicon file formats

Format	When to use
`.ico`	The original format. Supported everywhere. Safe default.
`.png`	Widely supported. Good for higher-resolution icons.
`.svg`	Modern browsers. Scales perfectly at any size.

For Summit Trail Outfitters, a single .ico file is sufficient:

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

What if you do not have a favicon file?

During development, add the <link> element with a placeholder path. The browser will show a broken icon or fall back to default — that is fine. What matters is that the element is in place with the correct structure. When a real icon is designed, you replace the href value.

Open Graph metadata

Open Graph (OG) is a set of <meta> tags that control how a page appears when shared as a link — in social media posts, in messaging apps like Slack, in email clients that show link previews.

Without Open Graph tags, the platform guesses what to show — it may pick the wrong title, a random image, or no preview at all. With OG tags, you control the preview.

The core Open Graph tags

<meta property="og:title" content="Summit Trail Outfitters — Guided Hiking Tours">
<meta property="og:description" content="Small-group guided hiking adventures across the Pacific Northwest.">
<meta property="og:type" content="website">

og:title — the title shown in the link preview (often the same as <title>)
og:description — the excerpt shown under the preview title
og:type — what kind of content this is (website for most pages; article for blog posts)

A fourth tag: `og:image`

<meta property="og:image" content="https://summittrailoutfitters.com/images/og-preview.jpg">

og:image specifies the image used in the preview. It should be at least 1200×630 pixels. For now, this can point to a placeholder — the structure is what counts.

Open Graph tags are optional but beneficial

OG tags are not required for a valid HTML document. They do not affect the visible page. But when someone shares a link to your site, the difference between a rich preview with a title, description, and image versus a bare URL is significant for credibility and click-through.

Putting it together

Here is the <head> for the Summit Trail Outfitters homepage with favicon and Open Graph tags added:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Summit Trail Outfitters — Guided Hiking Tours in the Pacific Northwest</title>
  <meta name="description" content="Summit Trail Outfitters leads small-group guided hiking tours through the most spectacular trails in the Pacific Northwest.">

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

  <meta property="og:title" content="Summit Trail Outfitters — Guided Hiking Tours">
  <meta property="og:description" content="Small-group guided hiking adventures across the Pacific Northwest. Book your next adventure.">
  <meta property="og:type" content="website">
</head>

Note the order: <meta charset> first (as established in Lesson 01), then viewport, then title and description, then favicon and Open Graph tags. This is the standard convention — consistent, readable, and ensures the charset is declared before anything else.

Exercise

Open index.html for Summit Trail Outfitters.

Add the favicon <link> element to <head>. Use favicon.ico as the href — you do not need a real file for the structure to be correct.
Add the three core Open Graph <meta> tags to <head>.

Your updated <head> should now contain:

<meta charset="UTF-8">
<meta name="viewport" ...>
<title> (unique, descriptive)
<meta name="description" ...>
<link rel="icon" ...>
<meta property="og:title" ...>
<meta property="og:description" ...>
<meta property="og:type" content="website">

Open index.html in your browser. Check the tab — the icon area will show a broken icon (because favicon.ico does not exist) or the browser’s default. That is expected. The structure is correct.

Recap

A favicon is linked with <link rel="icon" href="..." type="..."> inside <head>.
Without a favicon, browsers show a generic icon. With one, the site has visual identity in tabs and bookmarks.
Open Graph tags (og:title, og:description, og:type) control how the page appears in link previews on social media and messaging apps.
OG tags use property (not name) as the attribute.
Open Graph tags are optional but valuable for professionalism. Add them to the homepage at minimum.