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 & 11Outdated 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 matchiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To add a favicon, put the icon file in your deployed website and reference it from the document’s <head> with a rel="icon" link:
<head>
<meta charset="utf-8">
<title>Example page</title>
<link rel="icon" href="/favicon.ico">
</head>The href must resolve to the actual image URL on your live site. Use a root-relative path such as /favicon.ico when the file is at the site root, or a path such as /images/favicon.png when it is in a subdirectory.
The essential favicon markup
A favicon is the small icon browsers associate with a page in a tab, bookmark, history entry, or other browser interface. The HTML element that declares it is <link rel="icon">, placed inside <head>.
<link rel="icon" href="/favicon.ico">rel="icon" identifies the linked resource as the current document’s icon. href is its URL. The browser cannot use an icon that exists only in your source folder; the file must be copied into the deployed build and served over the same site or another permitted origin.
#1 Best Overall
Root-relative versus relative URLs
/favicon.icostarts at the website root, so it works from pages at any URL depth./icons/favicon-32.pngpoints to an icon in aniconsdirectory at the root.favicon.icois relative to the current document URL. On a page such as/docs/start.html, that can resolve to/docs/favicon.ico, which is often unintended.
Choose an icon format
ICO, PNG, and GIF are common favicon formats. ICO remains a compatibility-oriented default, while PNG is a straightforward modern raster choice. SVG can scale cleanly where the target browser supports SVG favicons.
| Format | Best use | Trade-off | Example declaration |
|---|---|---|---|
| ICO | Broad browser compatibility and a simple root file | Raster artwork does not scale as smoothly as vector artwork | <link rel="icon" href="/favicon.ico"> |
| PNG | Explicit raster sizes such as 16×16 or 32×32 | You need an appropriate file for each important size | <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png"> |
| SVG | Scalable artwork for browsers that support SVG icons | Support is not universal, so retain a fallback when compatibility matters | <link rel="icon" type="image/svg+xml" sizes="any" href="/icons/favicon.svg"> |
| GIF | A favicon supplied as a GIF image | Browser behavior and animation support vary; test the browsers you target | <link rel="icon" type="image/gif" href="/icons/favicon.gif"> |
MDN describes 16×16 pixels as a typical favicon convention. A 32×32 PNG is also commonly declared explicitly. There is no single size that covers every browser surface, so provide the sizes your design and audience need.
Declare several browser variants
You can provide multiple icon links. The browser uses the declared type, sizes, and optional media values as selection hints and chooses an appropriate supported resource.
Free tools Windows power users keep installed
One-click scans. No signup required.
<head>
<meta charset="utf-8">
<title>Example page</title>
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" sizes="any" href="/icons/favicon.svg">
</head>Why keep the ICO fallback?
The ICO declaration gives older or more conservative clients a broadly compatible resource. The PNG and SVG declarations let capable browsers select a more specific or scalable file. If you publish only SVG, browsers without SVG favicon support may fall back to an automatically requested /favicon.ico—but only if that file exists.
Add an icon for Apple home-screen shortcuts
An Apple home-screen or web-clip icon uses a separate convention. It does not replace the ordinary browser favicon declaration.
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">Keep the rel="icon" link for browser tabs and bookmarks, and add apple-touch-icon when your site should have a dedicated home-screen asset.
Put the files in the deployed site
- Create the icon files in the paths used by your markup.
- Ensure your build or deployment process copies those files rather than excluding them as unused assets.
- Deploy the HTML and the image files together.
- Open each icon URL directly, for example
https://example.com/favicon.ico, and verify that it displays the intended image rather than an HTML error page. - Inspect the final page source or DOM and confirm the
<link>elements are inside<head>.
File names and URL paths are case-sensitive on many hosts. /icons/Favicon.png and /icons/favicon.png are different paths on those systems.
Use attributes correctly
type
Set type when you are declaring a specific format, such as image/png or image/svg+xml. It tells the browser what kind of resource to expect and helps it reject unsupported candidates.
Rank #2
- Used Book in Good Condition
sizes
For raster resources, list dimensions as a space-separated value such as 16x16 32x32. Use sizes="any" for a scalable vector resource.
media
A media condition can limit a declaration to a particular environment. If you use it, verify that the condition is intentional and that another icon remains available when it does not match.
Why a favicon is not showing
The link is outside <head>
Move the declaration into the document’s <head>. A link placed in the page body is not the standard favicon declaration.
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 →The URL returns the wrong response
Paste the exact href URL into the address bar. If you see a 404 page, application HTML, a redirect loop, or a blank response, fix routing or deployment before changing the markup. The URL must return the image bytes.
The path or capitalization is wrong
Compare the URL character by character with the deployed filename. This is especially important on case-sensitive hosting.
The format or MIME declaration is unsupported
Check that the file is a valid ICO, PNG, GIF, or supported SVG and that any supplied type matches it. Remove an incorrect type rather than advertising a format the file does not contain.
Another declaration is being selected
When several links exist, review every type, sizes, and media value. A browser may be choosing a different valid candidate than the one you are editing.
Recommended Free Tools
The old icon is cached
Favicons are cached aggressively. Hard-refresh the page, open a private window, or clear the site’s cached data after replacing an icon. Test the deployed URL, not only a local development server.
The server sends an HTML error page as an image
Use your browser’s developer tools Network panel or a header request such as curl -I https://example.com/favicon.ico to inspect the response. Confirm a successful status, an image content type, and nonzero content length. Correct the server route if the response is an error document.
Performance, reliability, and maintenance
- Keep the icon files small; a favicon is downloaded frequently and provides little benefit when it is unnecessarily large.
- Use stable, cacheable URLs. When you intentionally replace an icon, a changed filename or a versioned URL can make rollout easier than relying on every browser to discard its old cache immediately.
- Retain one reliable fallback, normally
/favicon.ico, when serving modern PNG or SVG variants. - Test the page from the same hostname and protocol users will access. A correct local path does not prove that the production build publishes the asset.
- Do not assume a favicon is an accessibility substitute for a page title, visible brand name, or other text. It is browser metadata, not the page’s primary identification.
Quick implementation checklist
- At least one
<link rel="icon">appears inside<head>. - Every
hrefpoints to a deployed image URL. - The URL’s filename and capitalization exactly match the published file.
- The declared
typeandsizesmatch the resource. - A root
/favicon.icoexists if you rely on the conventional automatic fallback. - An
apple-touch-iconis included separately if home-screen behavior matters. - You have tested after clearing or bypassing the browser cache.
Or skip the browser setup
If your goal is to verify the deployed page around a favicon change rather than automate a browser yourself, ScreenshotNeo provides a website screenshot API and MCP server. It captures a URL with one request; the screenshot itself shows page content, while the browser tab icon remains outside the captured viewport.
Before capture, ScreenshotNeo 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 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. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsSee the complete parameter reference in the ScreenshotNeo documentation. A direct request looks like this:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpThe same call in Python:
import 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)And in 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}`);Every feature is available on every plan. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo to try the free allowance.
Frequently Asked Questions
Does a favicon appear in a ScreenshotNeo image?
No. A screenshot contains the webpage viewport; the browser tab and its favicon are browser-interface elements outside that viewport. Use the direct favicon URL and browser testing to verify the icon itself.
Is /favicon.ico mandatory?
No. An explicit rel="icon" link can point to PNG, SVG, GIF, or another supported resource. The root ICO file is a compatibility fallback and a conventional automatic request, not a requirement.
The Bottom Line
Put a supported icon file in the deployed site and reference it from <head> with <link rel="icon" href="...">. Add explicit PNG or SVG variants, an Apple touch icon when needed, and verify the live URL and cache behavior.
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.
