Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →HTML cannot put an image inside the <title> element: <title> is text only. If you mean the small image in a browser tab, add a favicon with <link rel="icon">. If you mean the large image shown when a URL is shared, add Open Graph metadata such as og:image. If you mean an image in Google Search, follow image-SEO guidance; there is no single “title image” setting and Google controls the final result.
First, identify where the image should appear
“Page title image” describes several different publishing targets. They use different consumers, markup and asset types:
| Where you want the image | Correct implementation | What controls the final display |
|---|---|---|
| Browser tab, bookmark or browser UI | Favicon via <link rel="icon"> |
The browser and, in some cases, search-engine eligibility rules |
| Social or messaging link preview | Open Graph properties including og:image and og:title |
Each crawler or messaging client’s cache and rendering rules |
| Google Images or an image-enhanced search result | Relevant page imagery plus technically sound metadata | Google’s crawling, indexing and generated result presentation |
| The visible page heading | An <h1> and an ordinary body <img> |
Your page layout and CSS |
The browser title and the visible heading are separate: <title> belongs in <head> and supplies the document title shown in a tab or title bar, while <h1> is content in the page body. See MDN’s title-element reference.
Set the text title first
Every document should have a concise, descriptive title. Keep it as plain text; HTML tags or an image URL inside it do not create an image.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<!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>Do not try <title><img src="..."></title>. The title element accepts text, not child elements, and an image there will not render. For a visible image, put <img> in <body> with useful alternative text.
Add a browser-tab image (favicon)
Use a rel="icon" link in the document head. The referenced file must exist at that URL and be accessible to the browser.
<head>
<title>Example Page Title</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>Use a root-relative path when the icon is hosted at your site’s root. You can also use another image format, for example:
<link rel="icon" href="/images/favicon.png" type="image/png">Browsers use favicons in tabs and bookmarks. Google documents favicon markup for potential display in organic results, but adding the link does not guarantee that every browser or Google interface will show it. The icon should be crawlable and the page should follow Google’s requirements in Define a favicon to show in search results.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
Favicon checks
- Open the icon URL directly, such as
https://example.com/favicon.ico, and confirm it returns the image rather than an HTML error page. - Use an absolute HTTPS URL when a deployment, proxy or subdirectory could change how a relative path resolves.
- After replacing an icon, reload without cache or use a new filename; browsers can retain old favicons for a while.
- Keep the link inside
<head>, not in the page body.
Set the image used in shared-link previews
Open Graph metadata describes the page as a shareable object. Put the properties in <head>, use an absolute publicly reachable image URL, and provide the title separately from 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="Description of the image">
</head>The Open Graph protocol defines og:image as the image URL representing the page or object and og:title as its associated title. Its specification is at ogp.me. The image URL should not require a login, a cookie, or client-side JavaScript to return the file.
Make previews dependable
- Choose an image that represents this specific page, rather than a generic site logo.
- Use a stable, publicly fetchable HTTPS URL and return the correct image content type.
- Keep
og:urlaligned with the canonical URL you want shared. - Include
og:image:altso consumers have a text description when they support it. - Expect caching: a messaging service may keep an earlier image after you change the HTML. Its own debugger or cache-refresh control may be required.
Open Graph markup expresses your intended representation; it cannot force every social network or messaging client to render the same crop, dimensions or title. A client may fetch metadata at a later time or apply its own limits.
If you mean Google Images or an image in search
There is no HTML “title image” property that assigns a picture to a Google result title. Google recommends relevant, representative images and supports og:image as image context, but image discovery and title-link generation are separate systems. Read Google’s Image SEO best practices for image-discovery guidance and Influencing title links in Google Search for how title links are generated.
Use a representative page image
Place the actual image in the body where it makes semantic sense, with descriptive alt text:
<main>
<h1>Example Page Title</h1>
<img src="/images/example.jpg"
alt="A representative description of the example page image"
width="1200" height="630">
</main>Do not use a generic logo when a page-specific image better represents the content. Use a suitable aspect ratio and high resolution where practical, while keeping the file optimized for loading. Search results, snippets and image presentation are generated by Google, so no author can promise a fixed title-and-image combination.
Keep metadata valid and in the head
Use only valid metadata elements in <head>, including <title>, <meta> and <link>. Do not insert an <img> element in the head to “define” a title image. Google warns that invalid elements can cause it to stop reading later metadata; its valid-metadata guidance is at Valid page metadata for Google Search. Keep visible images in the body and reference favicons and preview images through their appropriate metadata links.
Recommended head order
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Page Title</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<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="Description of the image">
</head>Complete troubleshooting checklist
The browser tab still shows a blank or old icon
- Verify the
hrefpath and filename, including capitalization. - Request the URL directly and check for a successful image response.
- Clear the browser cache or test in a private window; favicon caches can outlive normal page reloads.
- Confirm the link is in the rendered
<head>, not injected after navigation by code.
The shared preview has no image
- Check that
og:imageis absolute, HTTPS and publicly reachable without authentication. - Inspect the response for redirects, access blocks, robots restrictions or an incorrect content type.
- Refresh the platform’s cached scrape after changing the image or metadata.
- Make sure the metadata is present in the server-rendered HTML that the crawler receives.
Google shows a different title or image
Google may rewrite title links and choose imagery based on its systems. Ensure the page title, visible heading, body image and metadata are accurate and consistent, then allow time for recrawling. The Google documentation above describes influence, not a guaranteed presentation.
Rank #4
The metadata disappears from processing
Validate the head and remove non-metadata elements such as <img>. Invalid head content can prevent later metadata from being read.
Or skip the browser setup
If your goal is to capture the rendered page—not configure its metadata—ScreenshotNeo is a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP or PDF. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing status.
One request is enough (see the ScreenshotNeo documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server for Claude, Cursor and other MCP clients, so AI agents can call take_screenshot, get_page_info and capture_pdf. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
A practical decision guide
- Need a tiny browser or bookmark icon? Use
rel="icon". - Need a social or messaging card? Use
og:titleplusog:imageand related Open Graph properties. - Need an image associated with search visibility? Publish a relevant body image and follow Google’s image guidance; do not expect a fixed result.
- Need an image visible inside the page? Use an ordinary body
<img>, not metadata.
Frequently Asked Questions
Can I put an image URL inside the HTML title element?
No. The <title> element is text-only. Use a favicon link, Open Graph metadata or a body image according to the display context.
Do I need both a favicon and og:image?
Only if you want both a browser-tab icon and a shared-link preview image. They serve different consumers and are independent.
Why does a social platform ignore my updated image?
Preview crawlers cache metadata. Confirm the image is publicly reachable, then use that platform’s cache-refresh tool or wait for a new crawl.
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.
