Module 7: Head and Metadata · Lesson 3 of 5
How to Add a Favicon and Open Graph Tags in HTML
All lessons in Module 7
- Title and Charset
- Viewport and Description
- Favicon and Social Previews
- Linking CSS and JavaScript
- Project: Complete Head
Goal: Give your page a tab icon and decide what its card looks like when people share it.
Learn
A favicon is the little icon in the browser tab and in bookmarks. You link it from the head:
<link rel="icon" href="favicon.svg">
rel says what the linked file is for. href says where it lives.
Paste a link into a chat or social app and it builds a preview card. Open Graph (opens in a new tab) tags tell it what to put on that card. They use property where other meta tags use name:
og:titlesets the card's headlineog:descriptionadds one line of summaryog:imagepicks the picture
Give og:image an absolute URL starting with https://. The app fetches the image from its own servers, so a relative path like pancakes.svg leads nowhere (see relative and absolute paths).
The short version
- Put
<link rel="icon" href="favicon.svg">in the head to set the icon for tabs and bookmarks. - Chat and social apps read Open Graph tags:
<meta>tags withproperty="og:..."andcontent. - The Open Graph protocol names four basic properties:
og:title,og:type,og:imageandog:url. og:imageneeds an absolutehttps://URL. About 1200 x 630 pixels suits most apps.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Moonlight Bakery - Fresh Bread Daily</title>
<link rel="icon" href="favicon.svg">
<meta property="og:title" content="Moonlight Bakery">
<meta property="og:description" content="Fresh bread every morning since 1998.">
<meta property="og:image" content="https://example.com/images/bread.jpg">
</head>
<body>
<h1>Moonlight Bakery</h1>
</body>
</html>Your task
The Sunday Pancake Club wants a tab icon and a tasty preview card when members share the page. Inside <head>, add:
- A favicon link:
<link rel="icon" href="favicon.svg">. - An
og:titlemeta tag. - An
og:descriptionmeta tag. - An
og:imagemeta tag with the absolute URLhttps://example.com/pancakes.svg.
The preview has no tab and no share card, so none of this will show there. Check reads the head instead.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<link rel="favicon" href="favicon.svg">Right
<link rel="icon" href="favicon.svg">Browsers do not know a rel keyword called "favicon"; the value they look for is icon.
Wrong
<head>
<title>Sunday Pancake Club</title>
<meta property="og:image" content="https://example.com/pancakes.jpg">
</head>Right
<head>
<title>Sunday Pancake Club</title>
<meta property="og:title" content="Sunday Pancake Club">
<meta property="og:description" content="Pancakes and friends, every Sunday at 10am.">
<meta property="og:image" content="https://example.com/pancakes.jpg">
<meta property="og:url" content="https://example.com/">
</head>Give an app only an image and it guesses the headline and text, so the card comes out different in every app.
Go deeper
Facebook created Open Graph, yet nearly every app that builds link previews reads it now, from messaging apps to LinkedIn and Slack. X (Twitter) has its own twitter: tags and falls back to Open Graph for the title, description and image. Add <meta name="twitter:card" content="summary_large_image"> if you want the big image layout there.
Apps cache previews, sometimes for days. After you change your tags, run the page through the Facebook Sharing Debugger or LinkedIn Post Inspector. Both fetch it again and list exactly which tags they found. To avoid typos from the start, copy a ready-made head and Open Graph template from HTMLCheatSheet (opens in a new tab).
Give every important page its own og:title, og:description and og:image. Add og:url with the page's canonical address (opens in a new tab) too, and shares of slightly different URLs get counted together.
One catch with formats: SVG works well for favicons and badly for share images. Many social platforms won't display an SVG in og:image, so on a real site export the card as JPG or PNG.
Frequently asked questions
How do I add a favicon to my website?
Upload the icon file, then add <link rel="icon" href="favicon.svg"> inside <head> on every page. Modern browsers accept SVG, PNG and ICO. With no link at all, many browsers still try /favicon.ico at the root of your site, so a file there works as a fallback. Browsers cache icons stubbornly. If your new one doesn't appear, open the page in a private window. The link element reference lists other rel values.
What size should a favicon be?
If it is an SVG, size doesn't matter: it stays sharp everywhere, so it is the simplest choice. For PNG or ICO, 32 x 32 pixels covers browser tabs. iPhones and iPads use a separate home screen icon, linked with <link rel="apple-touch-icon" href="apple-touch-icon.png"> and usually 180 x 180 pixels. Keep the design bold and plain, since it appears very small. The history of the favicon (opens in a new tab) explains why the old ICO format is still around.
What size should an Open Graph image be?
About 1200 x 630 pixels. That 1.91:1 ratio shows as a large card on most platforms. Some apps crop to a square or a smaller box, so keep text and faces away from the edges. Use JPG or PNG, keep the file fairly small, and always put the full https:// address in og:image.
