How to Set a Page Title Image in HTML
HTML titles are text-only. Learn how to add a favicon, social preview image, and visible page image with the right metadata.
Short answer: You cannot put an image inside the HTML <title> element. The title is text shown in a browser tab or title bar. Use separate metadata for the display you mean:
- Browser tab or bookmark icon: add a
<link rel="icon">favicon. - Social or messaging preview: add Open Graph metadata such as
og:titleandog:image. - Image visible on the page: add an ordinary
<img>in the document body. - Google Images: publish relevant, crawlable page imagery; Google decides how it appears in results.
These mechanisms serve different consumers and are not interchangeable.
What “page title image” can mean
| What you want | Use | Where it goes |
|---|---|---|
| Text in the browser tab | <title> |
<head> |
| Small icon beside the tab title | rel="icon" |
<head> |
| Image in a shared-link card | og:image |
<head> |
| Image rendered in the page | <img> |
<body> |
| Image discovered in Google Images | Relevant image plus crawlable page markup | Usually the body and metadata |
MDN describes <title> as a text-only document title, while the Open Graph protocol defines og:image as the image representing a page or object. MDN’s title reference and the Open Graph specification document these roles.
1. Set the text title
Put one descriptive <title> element in the document head:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Page Title</title>
</head>
<body>
<h1>Example Page Title</h1>
</body>
</html>HTML tags inside <title> are treated as text; they cannot create an image or formatting. Keep the title specific to the page and different from unrelated pages on the same site.
2. Add a browser-tab image (favicon)
A favicon is the small site or page icon shown by browsers in tabs, bookmarks, and other browser UI. Add a link from the head to an image file:
<head>
<title>Example Page Title</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>You can also use a modern PNG or SVG asset:
<link rel="icon" href="/icons/favicon-32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/icons/icon.svg" type="image/svg+xml">Favicon checklist
- Make the URL resolve from the page’s origin, or use an absolute URL when appropriate.
- Serve the file with the correct content type and a successful HTTP response.
- Use a simple design that remains legible at small sizes.
- Keep the file crawlable if you want search engines to consider it.
- Expect caching: a browser may continue showing an older icon until its cache expires.
Google documents the rel="icon" markup for favicon eligibility in search results, but adding the link does not guarantee that every browser or Google interface will display it. See Google’s favicon guidance.
3. Add an image to social and messaging previews
For a shared URL, provide Open Graph metadata. Use absolute, publicly reachable URLs because a remote crawler must fetch the image:
<head>
<title>Example Page Title</title>
<meta property="og:title" content="Example Page Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/images/share-image.jpg">
<meta property="og:image:alt" content="A representative image for Example Page">
</head>og:title supplies the preview title and og:image supplies its representative image. The og:image:alt value describes the image for accessibility and consumers that expose alternative text.
Optional Open Graph properties
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="A concise description of the page.">Use the dimensions only when they accurately describe the asset. Preview clients fetch metadata at different times and cache results, so correct markup describes the intended card without guaranteeing an identical rendering in every app.
4. Put an image visibly on the page
If you mean an image next to or below the page heading, place it in the body with useful alternative text:
<main>
<h1>Example Page Title</h1>
<img
src="/images/example-hero.jpg"
alt="A representative illustration of the example page"
width="1200"
height="630"
loading="eager"
>
</main>Use loading="lazy" for below-the-fold images. Keep width and height (or an equivalent aspect-ratio rule) to reduce layout shifts. Do not put <img> in <head> to define a title image.
5. Complete example with title, favicon, preview, and hero image
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Choose a Favicon and Share Image</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta property="og:title" content="How to Choose a Favicon and Share Image">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guide">
<meta property="og:image" content="https://example.com/images/guide-share.jpg">
<meta property="og:image:alt" content="A guide to browser icons and link preview images">
<meta property="og:description" content="Understand title text, favicons, and Open Graph images.">
</head>
<body>
<main>
<h1>How to Choose a Favicon and Share Image</h1>
<img src="/images/guide-hero.jpg"
alt="Browser tab and shared-link image examples"
width="1200" height="630">
<p>Your page content starts here.</p>
</main>
</body>
</html>6. Search engines and image results
Google recommends relevant, representative imagery and treats image discovery separately from the browser title and social previews. A page-specific image is generally more useful than a generic logo when it represents the page’s subject. Google generates title links and snippets dynamically, so authors cannot promise a fixed image or title presentation in every search result.
Follow Google’s Image SEO guidance for crawlable images and its title-link documentation for how search titles are generated.
7. Keep metadata valid
Metadata belongs in <head>. Google lists elements such as <title>, <meta>, and <link> as valid head content. Invalid elements can interfere with processing of later metadata, so keep visible images in <body>. See Google’s valid page metadata reference.
8. Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| No icon in the tab | Wrong path, missing file, invalid MIME type, or browser cache | Open the favicon URL directly, check the response status and content type, then hard-refresh or test in a private window. |
| Social card has no image | Image URL is relative, private, blocked, or returns an error | Use an absolute HTTPS URL that a crawler can fetch without authentication. |
| Old social image remains | The sharing service cached the previous metadata | Confirm the new HTML is live and use the service’s documented refresh or debugger workflow. |
| Title shows literal markup | Tags were placed inside <title> |
Keep the title plain text and move imagery to favicon, Open Graph, or body markup. |
| Google shows a different title | Search title links are generated from multiple page signals | Use a clear <title>, visible heading, and consistent page content; do not assume a fixed result. |
| Image is not discovered | Crawler cannot access it or the page gives no useful context | Check robots and HTTP access, use descriptive alt text, and place relevant imagery near related content. |
| Layout jumps while image loads | No intrinsic dimensions were supplied | Set width and height, or reserve space with CSS aspect-ratio. |
9. Performance, reliability, and cost notes
- Keep the favicon small and cacheable; it is requested frequently across page loads.
- Compress large hero and share images while preserving enough detail for their display size.
- Use stable, versioned URLs when you need predictable cache invalidation.
- Serve images over HTTPS from a host that permits unauthenticated crawler access.
- Declare image dimensions to reduce layout movement.
- There is no HTML purchase or service requirement for a title, favicon, or Open Graph image; your hosting and asset-delivery costs depend on your own setup.
Or skip the browser setup
If your goal is to generate a clean image of the finished page rather than configure its metadata, ScreenshotNeo captures a URL with one request. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. It also provides an MCP server for AI agents through take_screenshot, get_page_info, and capture_pdf.
See the ScreenshotNeo API documentation for all options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://example.com \
-o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', data));There are 1,000 screenshots per month on the free plan with no card. Paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
FAQ
Can an image be nested inside <title>?
No. The element contains text only.
Is a favicon the same as an Open Graph image?
No. A favicon is a small browser or site icon; og:image represents a page in link previews.
Should the Open Graph image URL be relative?
Use an absolute, publicly reachable URL so remote preview crawlers can fetch it reliably.
Will adding metadata force Google to show that exact image?
No. Search and preview clients can choose how they render metadata, and Google generates result presentations dynamically.
Where does the visible page image belong?
Use <img> or another visual element in the document body, near the content it explains.
