We use cookies to enhance your experience on the site

Favicon and Open Graph - The Face of the Pyramid

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. To add a favicon:

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>

Favicon Formats:

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

Open Graph - Social Media Preview

When you share a link on Facebook, Twitter, or LinkedIn, a preview with a title, description, and image appears. This works thanks to Open Graph meta tags:

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
14  <!-- Twitter Card -->
15  <meta name="twitter:card" content="summary_large_image">
16  <meta name="twitter:title" content="Ancient Egypt Museum">
17  <meta name="twitter:description" content="Discover the secrets of pyramids">
18  <meta name="twitter:image" content="https://example.com/pyramid.jpg">
19</head>

Important Open Graph Meta Tags:

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

Meta Tag description

Do not forget about the classic

description

meta tag - it is the one that appears in Google search results:

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

Go to CodeWorlds→