Favicon and Open Graph - The Face of the Pyramid

You have fifteen tabs open in your browser and you are looking for the museum one, but they all have the same gray icon and their titles are cut off. Or you send a friend a link to your page, and the messenger shows only a bare address, with no image and no description. Two small things in the <head> section fix both situations. Every pyramid in Egypt had its unique symbol - the pharaoh's cartouche. In the world of websites, that symbol is the favicon (the icon in the browser tab) and Open Graph meta tags (page preview in social media).

Favicon - Page Icon

A favicon is a small icon displayed next to the page title in the browser tab, and also in bookmarks and history. You add it with a <link> element in the <head> section:

1<head>
2  <!-- Basic favicon (16x16 or 32x32 pixels) -->
3  <link rel="icon" type="image/x-icon" href="/favicon.ico">
4
5  <!-- Modern favicons in PNG format -->
6  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
7  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
8
9  <!-- Icon for Apple devices -->
10  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
11</head>

The most important part is the rel="icon" attribute - it tells the browser that the file in href is the page icon. type and sizes help it pick the best file, and apple-touch-icon appears on an iPhone screen after the page is added to the home screen. Without any link, many browsers will still try to fetch the /favicon.ico file from the server's root directory.

Favicon Formats:

• .ico - traditional format, supported by all browsers
• .png - modern format with transparency
• .svg - scalable, ideal for modern browsers

I recommend a set: an .ico file as a fallback and an SVG or PNG icon for newer browsers. Design it so that it is readable at 16 pixels - a cartouche with one clear sign works better than a whole scene with pyramids.

Open Graph - Social Media Preview

When you share a link on Facebook, X (formerly Twitter), or LinkedIn, a preview with a title, description, and image appears. This works thanks to Open Graph meta tags - a protocol created by Facebook that most services and messengers read today. You add them next to the ordinary meta tags, with the property attribute:

1<head>
2  <!-- Basic meta tags -->
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5  <meta name="description" content="A page about the pyramids of Egypt">
6
7  <!-- Open Graph -->
8  <meta property="og:title" content="Ancient Egypt Museum">
9  <meta property="og:description" content="Discover the secrets of pyramids and pharaohs">
10  <meta property="og:image" content="https://example.com/pyramid.jpg">
11  <meta property="og:url" content="https://example.com">
12  <meta property="og:type" content="website">
13</head>

Each tag is a pair: the name in property and the value in content. The protocol requires four of them on every page: og:title, og:type, og:image and og:url. The image address must be complete, with https://, because the service fetches it from outside, not from your folder.

X also has its own similar set of tags, the Twitter Card. Notice that here we use the name attribute, not property:

1<head>
2  <!-- Twitter Card -->
3  <meta name="twitter:card" content="summary_large_image">
4  <meta name="twitter:title" content="Ancient Egypt Museum">
5  <meta name="twitter:description" content="Discover the secrets of pyramids">
6  <meta name="twitter:image" content="https://example.com/pyramid.jpg">
7</head>

summary_large_image selects a large preview with a full-width image. When twitter:title or twitter:image is missing, X falls back to the Open Graph equivalents, so you cannot do without twitter:card, but you can skip the rest.

Important Open Graph Meta Tags:

• og:title - page title (recommended up to about 60 characters)
• og:description - page description (recommended up to about 160 characters)
• og:image - preview image (recommended 1200x630 pixels)
• og:url - canonical page URL
• og:type - content type (website, article, product)

The character limits are guidelines, not requirements of the protocol - a service will usually truncate longer text. You can check the preview before publishing in Facebook's Sharing Debugger or LinkedIn's Post Inspector.

Meta Tag description

Do not forget about the classic description meta tag - Google often shows it as the page description in search results, although sometimes it prefers a fragment of the content itself:

1<meta name="description" content="Ancient Egypt Museum - explore exhibitions, learn the history of pharaohs. Tickets online.">

Write it for a human, not a robot: one or two sentences that invite a click. Every subpage should have its own, different description.

Order in head

Finally, the order. The one I recommend starts with the character encoding, because the browser has to learn it within the first 1024 bytes of the document:

1<head>
2  <meta charset="UTF-8">
3  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4  <title>Ancient Egypt Museum</title>
5  <meta name="description" content="Exhibitions, tickets and the history of the pharaohs.">
6  <link rel="stylesheet" href="style.css">
7</head>

After charset comes viewport, then the title and description, and further on the links to icons and stylesheets and the Open Graph tags. The order of the remaining tags does not change how the page works, but a fixed arrangement means that in every project you know where to look for what. In this module's final project, a favicon and Open Graph will be mandatory.

Practice

In the editor below you will find a page with a full set of meta tags and a mock-up of an Open Graph card. Compare the tags in <head> with the mock-up and point out which tag is responsible for each element of the preview:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Egypt Museum | Homepage</title>
7
8    <!-- Meta description -->
9    <meta name="description" content="Ancient Egypt Museum - discover the secrets of pyramids and pharaohs. Tickets online.">
10
11    <!-- Favicon -->
12    <link rel="icon" type="image/png" sizes="32x32" href="https://placehold.co/32x32/d4af37/1a1a2e?text=E">
13
14    <!-- Open Graph -->
15    <meta property="og:title" content="Ancient Egypt Museum">
16    <meta property="og:description" content="Discover the secrets of pyramids and pharaohs. Tickets online.">
17    <meta property="og:image" content="https://placehold.co/1200x630/d4af37/1a1a2e?text=Egypt+Museum">
18    <meta property="og:url" content="https://egypt-museum.com">
19    <meta property="og:type" content="website">
20
21    <!-- Twitter Card -->
22    <meta name="twitter:card" content="summary_large_image">
23    <meta name="twitter:title" content="Ancient Egypt Museum">
24    <meta name="twitter:description" content="Discover the secrets of pyramids and pharaohs">
25
26    <link rel="stylesheet" href="style.css">
27</head>
28<body>
29    <h1>Favicon and Open Graph in Practice</h1>
30
31    <section>
32        <h2>Meta tags of this page</h2>
33        <p>Check the page source (Ctrl+U) to see
34           all meta tags in the section &lt;head&gt;.</p>
35
36        <div class="meta-preview">
37            <h3>Open Graph Preview:</h3>
38            <div class="og-card">
39                <img src="https://placehold.co/600x315/d4af37/1a1a2e?text=Egypt+Museum"
40                     alt="Open Graph Preview" width="600" height="315">
41                <div class="og-info">
42                    <p class="og-url">egypt-museum.com</p>
43                    <h4>Ancient Egypt Museum</h4>
44                    <p>Discover the secrets of pyramids and pharaohs. Tickets online.</p>
45                </div>
46            </div>
47        </div>
48    </section>
49
50    <section>
51        <h2>Favicon</h2>
52        <p>Look at the browser tab - you will see the "E" icon
53           next to the page title. This is the favicon!</p>
54        <p>We add a favicon in the section <code>&lt;head&gt;</code>
55           using the tag <code>&lt;link&gt;</code>.</p>
56    </section>
57</body>
58</html>

Remember: the favicon is the pharaoh's cartouche on the door of your pyramid, and Open Graph is the sign at the entrance that invites guests before they cross the threshold.