PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteThe small picture beside a page title in a browser tab is called a favicon, short for “favorite icon.” A favicon can also appear in bookmarks and other browser interfaces. “Website tab icon” describes what you see; favicon is the technical term used in HTML documentation and search queries.
What a favicon does
A favicon identifies a site visually when its page is open, bookmarked, or listed in browser controls. It is separate from the page title: the title is text supplied by the document’s <title> element, while the favicon is an image resource selected by the browser.
MDN Web Docs describes a favicon as a tiny icon displayed in places such as the address bar, page tabs, and bookmarks menu. The same website can provide different icon files for different contexts, so the image shown in a browser tab is related to—but not necessarily identical to—an icon used when someone saves a site to a device home screen.
How a website declares its tab icon
Put an icon declaration in the document’s <head>:
<link rel="icon" href="/favicon.ico">The href value must point to a file that actually exists. With the leading slash, this example requests a file at the website’s root, such as https://example.com/favicon.ico. A root-level /favicon.ico is also commonly discovered by convention, even when no link element is present. An explicit declaration is safer when the file has another name or lives in another directory.
Recommended Free Tools
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Minimal HTML example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example page</title>
<link rel="icon" href="/assets/favicon.png">
</head>
<body>
<h1>Example page</h1>
</body>
</html>Upload favicon.png to /assets/, deploy the HTML, then open the page over its real domain. A local file opened directly from disk can behave differently from a page served by a web server.
Favicon sizes and formats
There is no single dimension that applies to every surface. MDN calls 16×16 pixels the usual traditional favicon size and lists ICO, PNG, and GIF as common formats. Google’s separate Search guidance uses different eligibility criteria: it requires a square image of at least 8×8 pixels and recommends an image larger than 48×48 pixels. Those Google figures describe a Search-result feature, not a universal browser-tab rule.
| Context | Documented guidance | What it means |
|---|---|---|
| Traditional browser favicon | 16×16 pixels is usual (MDN) | A small raster icon is sufficient for the classic tab and bookmark use case. |
| Google Search result | Square, at least 8×8 pixels; larger than 48×48 recommended (Google Search Central) | These are Search eligibility and recommendation figures, not a promise that every browser will display the same size. |
| Scalable icon declaration | sizes="any" can indicate a scalable icon (MDN) |
Use only when the referenced format and browser support make a scalable resource appropriate. |
PNG is a practical choice for a modern, transparent icon. ICO remains common for legacy conventions and can contain multiple embedded sizes. The file format and dimensions should follow the surface you are targeting; do not treat Google’s supported-format list as a universal requirement for all browsers.
Providing more than one icon
You may declare multiple candidates. Browsers use the rel, sizes, and file type hints to choose an appropriate resource:
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">The browser is not required to use the first line for every situation. Supplying dimensions helps it select a suitable candidate, but support varies by browser and platform. A home-screen installation can use a separate declaration designed for that platform; do not assume the tab icon and home-screen icon are interchangeable.
Rank #2
Making a favicon eligible for Google Search
Google Search Central documents a way to define a favicon for eligible organic-search surfaces. The crawler must be able to access both the homepage and the icon file. Google asks for a square image, a stable URL, and an icon that represents the site’s brand. Keep the declaration and file reachable without authentication or a block that prevents Google from fetching them.
Eligibility is not a guarantee of display. Google states that a favicon is not guaranteed to appear in Search results even when all guidelines are met. After a change, Google may need to recrawl the homepage and icon; its documentation describes that process as taking several days to several weeks, not as a fixed deadline. Search appearance is therefore conditional and separate from whether the icon appears in a browser tab.
Step-by-step setup and verification
- Create a square source image. Start with a simple mark that remains recognizable at a very small size. Export at least one browser-friendly file, such as PNG or ICO.
- Choose a stable URL. For the conventional setup, place the file at
/favicon.ico. If you use another path, record it exactly, including capitalization. - Add the link in
<head>. Use<link rel="icon" href="/path/to/icon.png">; addtypeandsizeswhen they accurately describe the file. - Deploy over HTTPS. Confirm that the page and icon URL return successfully from the public site, not only from your development machine.
- Check the browser tab. Open a new tab to avoid relying on an old cached resource. Test a bookmark as well if that context matters.
- Inspect the request. In browser developer tools, open the Network panel, reload, and look for the icon request. A 404, redirect loop, incorrect content type, or blocked request identifies a delivery problem.
- Test the exact URL directly. Paste the icon URL into the address bar. If it does not load as an image, fix the path, permissions, server mapping, or deployment before changing the HTML.
- For Google Search, wait for recrawling. Keep the URL stable and publicly crawlable. Meeting the documented requirements still does not ensure that Google will show the icon.
Troubleshooting common problems
The tab still shows a generic globe
Check the href path relative to the site root. A declaration such as href="favicon.png" is relative to the current document directory, while href="/favicon.png" starts at the domain root. Open the resolved URL directly and inspect the Network panel for 404 or permission errors. If the file was just replaced, test in a private window or use a new filename while debugging because browsers can cache icons aggressively.
The icon works on one page but not another
A relative path may resolve differently in nested directories. Use a root-relative path such as /icons/site.png or an appropriate absolute URL, and ensure every template emits the same <link> element.
The image looks blurry or cropped
Use a square source with enough pixels for the target context and avoid fine detail that disappears at 16×16. Check that the declared sizes matches the actual file; an inaccurate hint can cause an unsuitable candidate to be selected.
Google does not show the icon
Confirm that Google can fetch the homepage and favicon, that the image is square and meets its minimum guidance, and that the URL is stable and representative of the site. These checks establish eligibility only; Google explicitly does not guarantee display, and recrawling can take days or weeks.
The icon URL returns HTML instead of an image
This usually means a rewrite rule, authentication page, or error handler is intercepting the asset request. Exclude the icon path from application routing, return the actual image bytes, and verify the server’s response content type.
Browser icon, home-screen icon, and Search favicon are different jobs
Use the browser-tab favicon for tabs and bookmarks. A saved-to-home-screen experience may read a separate platform-specific declaration. Google Search has its own crawlability, square-image, and stability guidance. One file can sometimes serve several roles, but no single size or declaration is guaranteed to render identically across all browsers, devices, and Search surfaces.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to capture a page showing its tab-related branding, ScreenshotNeo can return a screenshot through one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or 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. ScreenshotNeo also provides an MCP server for AI agents, with take_screenshot, get_page_info, and capture_pdf tools.
See the ScreenshotNeo documentation for parameters and response details. cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://itechguides.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://itechguides.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://itechguides.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.
Rank #4
Frequently Asked Questions
Is “favicon” the same as a logo?
Not necessarily. A favicon is the small site icon supplied for browser and related interface surfaces; it may be a simplified version of a larger logo.
Can I use an SVG as a favicon?
An SVG can be declared with an appropriate icon link, and MDN documents sizes="any" as a hint for a scalable icon. Actual support depends on the browser and context, so provide a compatible fallback when coverage matters.
Does a favicon improve search ranking?
The Google guidance covers eligibility to show an icon in Search results, not a ranking benefit. Do not treat favicon setup as a ranking signal.
The Bottom Line
A website tab icon is a favicon. Add a correctly served <link rel="icon"> in the HTML head, choose dimensions for the context you care about, and remember that Google Search display is conditional rather than guaranteed.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
