You cannot place an image inside an HTML <title> element. The title is text in the document <head>. If you mean the small image in a browser tab, use a favicon with <link rel="icon">. If you mean the image shown when someone shares a URL, use Open Graph’s og:image. If you mean an image visitors see on the page, put a normal <img> in the document body.
First identify where the image should appear
“Page title image” describes several different browser and search experiences. Choose the metadata intended for the consumer that will display it.
| Desired result | Correct implementation | Who reads it |
|---|---|---|
| Text in the browser tab or title bar | <title>Page title</title> |
Browsers and assistive technologies |
| Small icon beside the tab, bookmark, or site name | <link rel="icon" href="..."> |
Browsers and, where eligible, Google Search |
| Large image in a social or messaging link card | og:image plus related Open Graph properties |
Social and messaging crawlers |
| Image visible in the article itself | A normal body <img> element |
Visitors and search crawlers |
| Image discovered in Google Images | Relevant page imagery and image SEO practices | Google Image Search |
These settings are related, but they are not interchangeable. MDN documents that <title> contains text only, while the Open Graph protocol defines og:image as a URL representing the page or object. See MDN’s title reference and the Open Graph protocol.
Set the text page title
Put one descriptive title element inside <head>:
<head>
<title>Example Product Documentation</title>
</head>The value should identify the document clearly. HTML tags, images, and other markup inside <title> are not rendered as HTML; they are treated as text. A title does not accept an image URL or an <img> child.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Keep the title distinct from the visible heading
The body’s <h1> is a visible content heading. It can have different wording from the browser title, although both should describe the same page. Do not replace a useful text title with an image: text remains important for navigation, accessibility, browser history, and search systems.
Add a browser-tab image with a favicon
Use a rel="icon" link in <head>:
<head>
<title>Example Product Documentation</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>The URL is resolved from your site’s origin, so /favicon.ico means a file at the site root. You can use another publicly served image path and an appropriate MIME type, for example:
<link rel="icon" href="/icons/favicon-32.png" type="image/png">Favicon checks
- Upload the file at exactly the path used in
href, including capitalization. - Serve it over HTTPS with a successful response and an image content type.
- Keep the link in
<head>, not in the body. - If Google visibility matters, make the icon crawlable. Google says favicon display in search is subject to its eligibility and presentation rules; adding the link does not guarantee a particular interface will show it. Follow Google’s favicon guidance.
Set an image for social and messaging previews
For a shared-link card, add Open Graph metadata in <head>:
<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 product dashboard on a laptop">
</head>Why the URL must be absolute
Preview crawlers fetch metadata from your public URL, often outside your network. An absolute HTTPS image URL gives them a complete address. The Open Graph specification defines og:title and og:image separately, and recommends og:image:alt when an image is supplied. Read the protocol specification for the complete property model.
Preview caveats
Each social or messaging service decides when it fetches and caches metadata. Your markup describes the intended card; it cannot guarantee that every client displays the same crop, title, or image at the same time. Keep the image publicly reachable and avoid requiring a logged-in session.
Rank #2
Show an image on the page itself
If the request is really for an image next to the heading, place it in the body and provide alternative text:
<body>
<h1>Example Page Title</h1>
<img src="/images/hero.jpg" alt="A product dashboard on a laptop">
</body>This is the correct place for visible content. Do not put an <img> element in <head> as a substitute for a favicon or Open Graph property.
Understand Google Images and search-result titles
Google’s image guidance concerns discovering and understanding relevant page imagery; it is not a separate “title image” setting. Use an image that represents the page rather than a generic logo when a page-specific image is available. Google recommends useful, representative images and reasonable quality. See Google’s Image SEO best practices.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Search-result title links and snippets are generated by Google. You can provide a descriptive <title> and valid metadata, but you cannot promise a fixed title-and-image combination in results. Google explains how it generates title links in its title-link documentation.
Use a valid document head
Keep only metadata elements such as <title>, <meta>, and <link> in <head>. Google warns that invalid elements there, including <img>, can prevent it from reading metadata that follows. The valid page metadata guidance lists permitted head elements. MDN’s overview of page metadata also explains the role of the head.
Complete example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Product Documentation</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta property="og:title" content="Example Product Documentation">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/docs">
<meta property="og:image" content="https://example.com/images/docs-card.jpg">
<meta property="og:image:alt" content="Example product documentation screen">
</head>
<body>
<main>
<h1>Example Product Documentation</h1>
<img src="/images/docs-hero.jpg" alt="Example product documentation screen">
</main>
</body>
</html>Or skip the browser setup
If your goal is to obtain a rendered image of the finished page rather than configure metadata, ScreenshotNeo is a website screenshot API and MCP server. It can capture the page after your title, favicon, Open Graph tags, and body content are deployed.
One GET request returns PNG, JPEG, WebP, or PDF. The cURL example below saves a WebP screenshot; see the ScreenshotNeo documentation for all options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/docs -o shot.webpEquivalent Python request
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/docs"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Equivalent Node.js request
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/docs' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo removes cookie-consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Every plan includes the same features, including full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets, custom viewport and retina scale, PDF controls, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot the common failures
The tab still shows no icon
- Open the favicon URL directly. A 404, redirect loop, or incorrect content type means the browser cannot use it.
- Check that the
<link>is in the served HTML’s<head>, not only in a template that is missing on this route. - Test in a private window or another browser after deployment; browsers can cache favicons independently from page content.
The social card has the wrong image or title
- Confirm that
og:image,og:title, andog:urlare present in the initial HTML response. - Use an absolute, publicly reachable URL and check that it does not require cookies, authentication, or JavaScript.
- Allow for the platform’s crawler cache; changing markup does not guarantee an immediate refresh everywhere.
Google ignores later metadata
- Inspect the document for invalid elements in
<head>, especially<img>, and move visible content into<body>. - Validate that tags are properly nested and that the server returns the intended HTML to crawlers.
The screenshot is blank or obstructed
- Wait for the page’s data and lazy images before capture, or use ScreenshotNeo’s selector, delay, or network-idle waits.
- Hide a selector or block a resource that creates an overlay. For bot checks and failed loads, inspect the returned
X-Page-VerdictandX-Billedheaders.
Performance, reliability, and cost considerations
- Metadata adds negligible page weight; the referenced favicon and preview image do create separate requests, so serve appropriately sized, cacheable assets.
- Keep preview images stable at a URL while iterating. Changing URLs can make cache behavior harder to diagnose across crawlers.
- For automated screenshots, use waits that match your application instead of an unnecessarily long fixed delay. Cache completed captures when the page has not changed.
- ScreenshotNeo charges only for clean shots. Cache hits, bot checks, blank pages, timeouts, and failed loads are identified in the response and cost nothing.
FAQ
Can I use an SVG or emoji inside <title>?
No. The element remains text-only. Use textual characters if appropriate, or configure a favicon and a separate preview image.
Do favicon and Open Graph images need to be the same file?
No. A favicon is a small browser-interface icon, while og:image represents the page in a larger share card. They normally use different assets.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #4
Will adding og:image force Google to show that image in search?
No. Open Graph is primarily for link-preview consumers. Google chooses search-result presentation independently.
Can a screenshot service repair a missing favicon?
No. It captures what the deployed page serves. Fix the HTML, asset path, and server response first, then capture the corrected page.
Frequently Asked Questions
Can I use an SVG or emoji inside <title>?
No. The element is text-only; use a favicon or separate image metadata instead.
Do favicon and Open Graph images need to be the same file?
No. They serve different display contexts and usually use different assets.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallWill og:image force Google to show that image in search?
No. Google generates search presentation independently of Open Graph previews.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
