How to Add a Website Tab Icon in HTML
Add a favicon to any HTML page with a link element, choose the right path and format, and fix common browser and Google Search issues.
The small image beside a page title in a browser tab is called a favicon. Add a <link rel='icon'> element inside your page’s <head>, and set href to the deployed image file.
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>My website</title>
<link rel='icon' href='/favicon.ico'>
</head>
<body>
<h1>My website</h1>
</body>
</html>Replace /favicon.ico with the real URL of your icon. The file must be deployed with your site and reachable at that URL. A root-relative path such as /favicon.ico starts at the site’s root; a path such as images/site-icon.png is resolved relative to the current document.
1. Add the favicon step by step
- Create an icon image. A square PNG, ICO, or another format supported by your target browsers is a practical starting point.
- Put the file in the directory that will be published. For the example above, place it at the site’s root as
favicon.ico. - Add the
<link rel='icon'>element inside<head>, before or after the title. - Deploy the page and the image together.
- Open the deployed page, inspect the document head, and open the icon URL directly to confirm it returns the intended image.
MDN documents rel='icon' as the link relation used for an icon and explains how browsers can use hints such as type, media, and sizes when several candidates are available. See the MDN link element reference.
2. Choose the file path and format
Root-relative versus relative paths
| HTML | File location expected | Use when |
|---|---|---|
href='/favicon.ico' |
https://example.com/favicon.ico |
The icon is at the domain root. |
href='/images/site-icon.png' |
https://example.com/images/site-icon.png |
The icon is in a root-level images directory. |
href='images/site-icon.png' |
Relative to the current page URL | Your directory structure makes that relative URL correct. |
href='https://cdn.example.com/site-icon.png' |
The exact absolute URL | The icon is hosted on another origin and is publicly reachable. |
Filename capitalization matters on case-sensitive servers. If the deployed file is named Site-Icon.png, an href pointing to site-icon.png can fail even when it works on a case-insensitive local filesystem.
ICO
<link rel='icon' href='/favicon.ico'>ICO has broad browser support and remains a simple choice for a single favicon.
PNG
<link rel='icon' type='image/png' href='/images/site-icon.png'>Declare the MIME type when it helps describe the resource. Ensure the server also sends an appropriate Content-Type.
SVG
<link rel='icon' type='image/svg+xml' sizes='any' href='/images/site-icon.svg'>MDN documents sizes='any' as a hint for scalable formats such as SVG. Browser and context support can differ, so provide a fallback when your supported browser set requires one.
3. Offer more than one icon
You can provide several links. The browser may select among them using the declared type, media condition, and size hints; if a preferred candidate is unsupported, it may try another.
<link rel='icon' type='image/svg+xml' sizes='any' href='/images/site-icon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/images/site-icon-32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='/images/site-icon-16.png'>
<link rel='icon' href='/favicon.ico'>Do not add links to files that are missing or return HTML error pages. Each candidate should be a real image at a stable URL.
4. Keep the browser-tab favicon separate from Google Search
A browser can show an icon as soon as the page’s rel='icon' link resolves. Google Search has separate eligibility guidance. Google says the homepage should include a favicon link, Googlebot and Googlebot-Image must be able to crawl the page and icon, and the icon should be square. For Search, Google states a minimum of 8×8 pixels and recommends an image larger than 48×48 pixels. It supports BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF for this feature, requires a stable icon URL, and describes one favicon per hostname.
These are Google Search display rules; they are not universal requirements for a browser tab. A browser may display an icon even when a page does not meet Google’s Search eligibility conditions.
5. Framework and site-generator placement
Static HTML
Put the link in the shared head of every page, or in the layout template that generates every page.
Server-rendered templates
Add the same element to the base layout rather than repeating it in individual views. Verify that the final rendered HTML still places it inside <head>.
Single-page applications
Place the favicon link in the application’s entry HTML document. Route changes normally do not require a new favicon link because the browser tab belongs to the document.
Static site generators
Copy the icon into the generator’s public or static asset directory so it is emitted at the URL used by href. Check the generated output, not only the source template.
6. Troubleshoot a missing or stale icon
| Symptom | Likely cause | Fix |
|---|---|---|
| No icon appears | The link is outside <head>, or the page was not redeployed. |
Inspect the rendered document head and deploy the changed HTML. |
| The icon URL returns 404 | The path, directory, or filename is wrong. | Open the exact href URL directly and correct the path. |
| Works locally, fails in production | Case mismatch, missing asset, or different build output. | Compare the deployed filename and URL character by character. |
| A broken-image symbol appears | The server returned an error page or invalid image data. | Check the response status and content type; replace the bad asset. |
| Only one browser shows it | Format support or candidate selection differs. | Provide a broadly supported ICO or PNG fallback alongside specialized formats. |
| An old icon remains | The browser may have a cached resource. | Confirm the current icon URL and consult the browser’s current cache-refresh documentation; do not assume a universal refresh procedure. |
| Google Search has no icon | Search crawling or eligibility differs from browser-tab behavior. | Check crawl access, square dimensions, stable URL, and Google’s current favicon guidance. |
7. Reliability, performance, and security checklist
- Keep the icon small; browsers request it frequently across page loads.
- Serve it from a stable HTTPS URL with a correct image MIME type.
- Deploy the icon before or with the HTML that references it.
- Use a cache-friendly immutable filename when your deployment pipeline supports versioned assets.
- Do not rely on a development-server path that does not exist in production.
- Check the final HTML source and the direct resource response after each deployment.
- If the icon is hosted on another origin, ensure that URL remains publicly reachable.
8. Verify the result with a rendered screenshot
A screenshot can confirm that the deployed page renders as expected, including the page itself after assets load. It cannot replace checking the direct icon URL or the document head, because a browser screenshot service may not expose browser chrome or the tab strip.
9. Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Use it when you need a clean rendered capture of a page after deploying the favicon, without maintaining your own browser automation.
See the ScreenshotNeo API documentation for the complete option list.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, 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. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots.
Create a free ScreenshotNeo account to get 1,000 screenshots each month with no card.
10. FAQ
Does the favicon link have to be in every HTML file?
It needs to be in the rendered head of each document where you want the icon. A shared layout or entry document is usually enough for sites that generate pages from one template.
Can I use a normal PNG image?
Yes. Link it with rel='icon', use the correct path, and optionally declare type='image/png'.
Is a manifest required?
No. A favicon link is sufficient for a browser tab. A web app manifest is a separate feature for installation and app icons.
Why does Google Search show a different icon?
Google Search applies its own crawling, eligibility, and selection rules. Browser-tab display and Search display are separate concerns.
Can CSS add the tab icon?
No. The browser-tab icon is linked from HTML with a link element.
11. Final checklist
- The icon file exists in the deployed output.
- The
hrefresolves to the intended URL. - The link is inside
<head>. - The filename capitalization matches exactly.
- The response is a valid image with the correct content type.
- A fallback format is present if your target browsers need one.
- The icon is square and larger than 48×48 pixels if Google Search eligibility matters.
- You checked both the rendered HTML and the direct icon URL.
